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
Enigma
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Johnny Depp
johnnydepp@left4code.com
Denzel Washington
denzelwashington@left4code.com
Tom Cruise
tomcruise@left4code.com
Brad Pitt
bradpitt@left4code.com
Products
Sony Master Series A9G
Electronic
Sony Master Series A9G
Electronic
Sony Master Series A9G
Electronic
Sony Master Series A9G
Electronic

## Dropdown

## Basic Dropdown

Show example code

                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Header & Footer Dropdown

Show example code

                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-56"
        HTMLCloseTag
            HTMLOpenTagdiv class="p-2 font-medium"HTMLCloseTag
        Export Options
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="activity"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            EnglishHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="box"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            Indonesia
                                            HTMLOpenTagdiv class="ml-auto rounded-full bg-danger px-1 text-xs text-white"HTMLCloseTag
                                                10
                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="layout"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            EnglishHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="sidebar"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            IndonesiaHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTagdiv
        class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="flex p-1"HTMLCloseTag
        HTMLOpenTagbutton
        data-tw-merge
        type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary px-2 py-1 px-2 py-1"
    HTMLCloseTagSettingsHTMLOpenTag/buttonHTMLCloseTag
                                            HTMLOpenTagbutton
        data-tw-merge
        type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 ml-auto px-2 py-1 ml-auto px-2 py-1"
    HTMLCloseTagView ProfileHTMLOpenTag/buttonHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Icon Dropdown

Show example code

                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-48"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="edit"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
     New
                                            DropdownHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="trash"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            Delete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Dropdown with close button

Show example code

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-start"
        class="dropdown relative inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagFilter Dropdown
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="chevron-down"
        class="stroke-1.5 w-5 h-5 ml-2 h-4 w-4 ml-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600"
        HTMLCloseTag
            HTMLOpenTagdiv class="p-2"HTMLCloseTag
                                                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-left text-xs"HTMLCloseTagFromHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTaginput
        data-tw-merge
        type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 mt-2 flex-1 mt-2 flex-1"
    /HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTagdiv class="text-left text-xs"HTMLCloseTagToHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTaginput
        data-tw-merge
        type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 mt-2 flex-1 mt-2 flex-1"
    /HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3 flex items-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
        data-tw-merge
        data-dismiss="dropdown" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 ml-auto w-32 ml-auto w-32"
    HTMLCloseTagCloseHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
        data-tw-merge
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary ml-2 w-32 ml-2 w-32"
    HTMLCloseTagSearchHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Scrolled Dropdown

Show example code

                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 h-32 w-40 overflow-y-auto"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagJanuaryHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagFebruaryHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagMarchHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagJuneHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagJulyHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Header & Icon Dropdown

Show example code

                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer cursor-pointer"
    HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTagdiv class="p-2 font-medium"HTMLCloseTag
        Export Tools
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        class="h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400"HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="printer"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            PrintHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="external-link"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            ExcelHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="file-text"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            CSVHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="archive"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            PDFHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Dropdown Placement

Show example code

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="top-start"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagTop StartHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="top"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagTopHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="top-end"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagTop EndHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="right-start"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagRight StartHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="right"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagRightHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="right-end"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagRight EndHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagBottom EndHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagBottomHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-start"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagBottom StartHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="left-start"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagLeft StartHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="left"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagLeftHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="left-end"
        class="dropdown relative mb-2 mr-1 inline-block"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="dropdown" aria-expanded="false" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary cursor-pointer w-32 cursor-pointer w-32"
    HTMLCloseTagLeft EndHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTagdiv
            data-transition
            data-selector=".show"
            data-enter="transition-all ease-linear duration-150"
            data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
            data-enter-to="!mt-1 visible opacity-100 translate-y-0"
            data-leave="transition-all ease-linear duration-150"
            data-leave-from="!mt-1 visible opacity-100 translate-y-0"
            data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
            class="dropdown-menu absolute z-[9999] hidden"
        HTMLCloseTagHTMLOpenTagdiv
            data-tw-merge
            class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
        HTMLCloseTag
            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
            class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
        HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag