first commit

components/Ml/Tabber/MlTabberBase.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex md:flex-row flex-col">
+    <div class="flex flex-col justify-between md:w-[40%] cursor-pointer">
+      <div
+        v-for="(el, index) in props.tabs"
+        :key="index"
+        :class="[
+          'w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center',
+          index === indexItem
+            ? 'md:border-r-0 font-[700]'
+            : 'md:border-r font-medium',
+        ]"
+        @click="
+          showContent(index);
+          useRipple($event, true);
+        "
+      >
+        {{ el.header }}
+      </div>
+    </div>
+    <div v-show="tabs[indexItem]" class="md:flex-1 h-auto">
+      <div class="flex flex-col items-start p-6 md:p-16">
+        <!-- Your image -->
+        <h1 class="my-5 font-bold text-2xl md:text-[32px]">
+          {{ tabs[indexItem].content.title }}
+        </h1>
+        <p class="font-ibm text-[16px] md:text-[18px]">
+          {{ tabs[indexItem].content.info }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+
+const indexItem = ref(0);
+
+function showContent(index) {
+  indexItem.value = index;
+}
+
+const props = defineProps({
+  tabs: Object,
+});
+</script>