library_components/src/components/Ml/Tabber/MlTabberBase.vue

<template>
  <div class="flex md:flex-row flex-col text-black">
    <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>