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
Leonardo DiCaprio
leonardodicaprio@left4code.com
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Tom Cruise
tomcruise@left4code.com
Tom Cruise
tomcruise@left4code.com
Products
Dell XPS 13
PC & Laptop
Dell XPS 13
PC & Laptop
Nike Air Max 270
Sport & Outdoor
Nike Tanjun
Sport & Outdoor

## Datepicker

## Basic Date Picker

Show example code

                    HTMLOpenTaginput
        data-tw-merge
        type="text" data-single-mode="true" 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 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
    /HTMLCloseTag

## Input Group

Show example code

                    HTMLOpenTagdiv class="relative mx-auto w-56"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="absolute flex h-full w-10 items-center justify-center rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
                                        HTMLOpenTagi
        data-tw-merge
        data-lucide="calendar"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" data-single-mode="true" 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 datepicker pl-12 pl-12 datepicker pl-12 pl-12"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Date Range Picker

Show example code

                    HTMLOpenTaginput
        data-tw-merge
        type="text" 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 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
    /HTMLCloseTag

## Modal Date Picker

Show example code
Show Modal

## Filter by Date

From
To

                    HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#datepicker-modal-preview" href="#" 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"
    HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="datepicker-modal-preview" class="modal group bg-black/60 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
    HTMLCloseTagHTMLOpenTag!-- BEGIN: Modal Header --HTMLCloseTag
                                        HTMLOpenTagdiv
        class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
    HTMLCloseTagHTMLOpenTagh2 class="mr-auto text-base font-medium"HTMLCloseTag
                                                Filter by Date
                                            HTMLOpenTag/h2HTMLCloseTag
                                            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 border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="file"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                Download DocsHTMLOpenTag/buttonHTMLCloseTag
                                            HTMLOpenTagdiv
        data-tw-merge
        data-tw-placement="bottom-end"
        class="dropdown relative sm:hidden"
    HTMLCloseTagHTMLOpenTaga
            data-tw-toggle="dropdown"
            aria-expanded="false"
            href="javascript:;" class="cursor-pointer block h-5 w-5"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="more-horizontal"
        class="stroke-1.5 w-5 h-5 h-5 w-5 text-slate-500 h-5 w-5 text-slate-500"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
            HTMLOpenTag/aHTMLCloseTag
                                                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"
        HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="file"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        Download DocsHTMLOpenTag/aHTMLCloseTag
        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag!-- END: Modal Header --HTMLCloseTag
                                        HTMLOpenTag!-- BEGIN: Modal Body --HTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="p-5 grid grid-cols-12 gap-4 gap-y-3"
    HTMLCloseTagHTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-datepicker-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        From
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTaginput
        data-tw-merge
        type="text" id="modal-datepicker-1" data-single-mode="true" 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 datepicker datepicker"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-datepicker-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        To
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTaginput
        data-tw-merge
        type="text" id="modal-datepicker-2" data-single-mode="true" 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 datepicker datepicker"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag!-- END: Modal Body --HTMLCloseTag
                                        HTMLOpenTag!-- BEGIN: Modal Footer --HTMLCloseTag
                                        HTMLOpenTagdiv
        class="px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400 text-right"
    HTMLCloseTagHTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="modal" 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 border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 mr-1 w-20 mr-1 w-20"
    HTMLCloseTagCancelHTMLOpenTag/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-primary border-primary text-white dark:border-primary w-20 w-20"
    HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag!-- END: Modal Footer --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag