<div>
<ul data-tw-merge role="tablist" class="border-b border-slate-200 dark:border-darkmode-400 w-full flex">
<li id="example-1-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1 -mb-px">
<button data-tw-merge data-tw-target="#example-1" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent active w-full py-2">Example Tab 1</button>
</li>
<li id="example-2-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1 -mb-px">
<button data-tw-merge data-tw-target="#example-2" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent w-full py-2">Example Tab 2</button>
</li>
</ul>
<div class="tab-content border-b border-l border-r">
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-1" role="tabpanel" aria-labelledby="example-1-tab" class="tab-pane active p-5 leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.</div>
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-2" role="tabpanel" aria-labelledby="example-2-tab" class="tab-pane p-5 leading-relaxed">It is a long established fact that a reader will be
distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum
is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content
here', making it look like readable English. Many
desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).</div>
</div>
</div>
<div>
<ul data-tw-merge role="tablist" class="p-0.5 border bg-slate-50/70 border-slate-200/70 rounded-lg dark:border-darkmode-400 w-full flex">
<li id="example-3-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1">
<button data-tw-merge data-tw-target="#example-3" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white rounded-md py-1.5 dark:border-transparent [&.active]:text-slate-700 [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 active w-full py-2">Example Tab 1</button>
</li>
<li id="example-4-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1">
<button data-tw-merge data-tw-target="#example-4" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white rounded-md py-1.5 dark:border-transparent [&.active]:text-slate-700 [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 w-full py-2">Example Tab 2</button>
</li>
</ul>
<div class="tab-content mt-5">
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-3" role="tabpanel" aria-labelledby="example-3-tab" class="tab-pane active leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.</div>
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-4" role="tabpanel" aria-labelledby="example-4-tab" class="tab-pane leading-relaxed">It is a long established fact that a reader will be
distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum
is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content
here', making it look like readable English. Many
desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).</div>
</div>
</div>
<div>
<ul data-tw-merge role="tablist" class="w-full flex">
<li id="example-5-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1">
<button data-tw-merge data-tw-target="#example-5" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white border-b-2 border-transparent dark:border-transparent [&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary active w-full py-2">Example Tab 1</button>
</li>
<li id="example-6-tab" data-tw-merge role="presentation" class="focus-visible:outline-none flex-1">
<button data-tw-merge data-tw-target="#example-6" role="tab" class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white border-b-2 border-transparent dark:border-transparent [&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary w-full py-2">Example Tab 2</button>
</li>
</ul>
<div class="tab-content mt-5">
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-5" role="tabpanel" aria-labelledby="example-5-tab" class="tab-pane active leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.</div>
<div data-transition data-selector=".active" data-enter="transition-[visibility,opacity] ease-linear duration-150" data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0" data-enter-to="visible opacity-100" data-leave="transition-[visibility,opacity] ease-linear duration-150" data-leave-from="visible opacity-100" data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0" id="example-6" role="tabpanel" aria-labelledby="example-6-tab" class="tab-pane leading-relaxed">It is a long established fact that a reader will be
distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum
is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content
here', making it look like readable English. Many
desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).</div>
</div>
</div>