Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Al Pacino
alpacino@left4code.com
Denzel Washington
denzelwashington@left4code.com
Al Pacino
alpacino@left4code.com
John Travolta
johntravolta@left4code.com
Products
Dell XPS 13
PC & Laptop
Apple MacBook Pro 13
PC & Laptop
Oppo Find X2 Pro
Smartphone & Tablet
Samsung Galaxy S20 Ultra
Smartphone & Tablet

## Tab

## Basic Tab

Show example code

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.
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).

                    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

## Boxed Tab

Show example code

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.
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).

                    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

## Link Tab

Show example code

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.
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).

                    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