HTMLOpenTagdiv HTMLCloseTag
HTMLOpenTagul
data-tw-merge
role="tablist"
class="border-b border-slate-200 dark:border-darkmode-400 w-full flex"
HTMLCloseTag
HTMLOpenTagli
id="example-1-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1 -mb-px"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-1"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.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"
HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTagli
id="example-2-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1 -mb-px"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-2"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.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"
HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
HTMLOpenTagdiv
class="tab-content border-b border-l border-r"HTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagLorem 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.HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagIt 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).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv HTMLCloseTag
HTMLOpenTagul
data-tw-merge
role="tablist"
class="w-full flex"
HTMLCloseTag
HTMLOpenTagli
id="example-3-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-3"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.active]:dark:text-white shadow-[0px_3px_20px_#0000000b] rounded-md [&.active]:bg-primary [&.active]:text-white [&.active]:font-medium active w-full py-2"
HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTagli
id="example-4-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-4"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.active]:dark:text-white shadow-[0px_3px_20px_#0000000b] rounded-md [&.active]:bg-primary [&.active]:text-white [&.active]:font-medium w-full py-2"
HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
HTMLOpenTagdiv
class="tab-content mt-5"HTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagLorem 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.HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagIt 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).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv HTMLCloseTag
HTMLOpenTagul
data-tw-merge
role="tablist"
class="w-full flex"
HTMLCloseTag
HTMLOpenTagli
id="example-5-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-5"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.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"
HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTagli
id="example-6-tab"
data-tw-merge
role="presentation"
class="focus-visible:outline-none flex-1"
HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
data-tw-target="#example-6"
role="tab"
class="cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400 [&.active]:text-slate-800 [&.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"
HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
HTMLOpenTagdiv
class="tab-content mt-5"HTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagLorem 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.HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
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"
HTMLCloseTagIt 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).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag