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
Icewall
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Brad Pitt
bradpitt@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Johnny Depp
johnnydepp@left4code.com
Al Pacino
alpacino@left4code.com
Products
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Nike Air Max 270
Sport & Outdoor
Apple MacBook Pro 13
PC & Laptop
Samsung Galaxy S20 Ultra
Smartphone & Tablet

## Modal

## Blank Modal

Show example code
Show Modal
This is totally awesome blank modal!

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#basic-modal-preview" 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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="basic-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]    p-10 text-center"
    HTMLCloseTagThis is totally awesome blank modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Modal Size

Show example code
Show Small Modal Show Medium Modal Show Large Modal Show Superlarge Modal
This is totally awesome small modal!
This is totally awesome medium modal!
This is totally awesome large modal!
This is totally awesome superlarge modal!

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Small Modal Toggle --HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#small-modal-size-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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagShow Small ModalHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTag!-- END: Small Modal Toggle --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Medium Modal Toggle --HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#medium-modal-size-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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagShow Medium ModalHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTag!-- END: Medium Modal Toggle --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Large Modal Toggle --HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#large-modal-size-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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagShow Large ModalHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTag!-- END: Large Modal Toggle --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Super Large Modal Toggle --HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#superlarge-modal-size-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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagShow Superlarge ModalHTMLOpenTag/aHTMLCloseTag
                                    HTMLOpenTag!-- END: Super Large Modal Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Small Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="small-modal-size-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-[300px]   p-10 text-center"
    HTMLCloseTagThis is totally awesome small modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Small Modal Content --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Medium Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="medium-modal-size-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]    p-10 text-center"
    HTMLCloseTagThis is totally awesome medium modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Medium Modal Content --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Large Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="large-modal-size-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-[600px]  p-10 text-center"
    HTMLCloseTagThis is totally awesome large modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Large Modal Content --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Super Large Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="superlarge-modal-size-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-[600px] lg:w-[900px] p-10 text-center"
    HTMLCloseTagThis is totally awesome superlarge modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Super Large Modal Content --HTMLCloseTag

## Warning Modal

Show example code
Show Modal
Oops...
Something went wrong!
Why do I have this issue?

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#warning-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="warning-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]"
    HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="x-circle"
        class="stroke-1.5 w-5 h-5 mx-auto mt-3 h-16 w-16 text-warning mx-auto mt-3 h-16 w-16 text-warning"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagOops...HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                Something went wrong!
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                            HTMLOpenTagbutton
        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 bg-primary border-primary text-white dark:border-primary w-24 w-24"
    HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="border-t border-slate-200/60 p-5 text-center dark:border-darkmode-400"HTMLCloseTag
                                            HTMLOpenTaga
                                                class="text-primary"
                                                href=""
                                            HTMLCloseTag
                                                Why do I have this issue?
                                            HTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Modal With Close Button

Show example code
Show Modal
Modal Example
Modal with close button

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#button-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="button-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]"
    HTMLCloseTagHTMLOpenTaga
                                            class="absolute right-0 top-0 mr-3 mt-3"
                                            data-tw-dismiss="modal"
                                            href="#"
                                        HTMLCloseTag
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-8 w-8 text-slate-400 h-8 w-8 text-slate-400"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        HTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="check-circle"
        class="stroke-1.5 w-5 h-5 mx-auto mt-3 h-16 w-16 text-success mx-auto mt-3 h-16 w-16 text-success"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagModal ExampleHTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                Modal with close button
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                            HTMLOpenTagbutton
        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 bg-primary border-primary text-white dark:border-primary w-24 w-24"
    HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Static Backdrop Modal

Show example code
I will not close if you click outside me. Don't even try to press escape key.

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#static-backdrop-modal-preview" 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/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop="static"
        aria-hidden="true"
        tabindex="-1"
        id="static-backdrop-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]    px-5 py-10"
    HTMLCloseTagHTMLOpenTagdiv class="text-center"HTMLCloseTag
                                            HTMLOpenTagdiv class="mb-5"HTMLCloseTag
                                                I will not close if you click outside me. Don't even
                                                try to press escape key.
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagbutton
        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 bg-primary border-primary text-white dark:border-primary w-24 w-24"
    HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Overlapping Modal

Show example code
Show Modal
Click button bellow to show overlapping modal!
Show Overlapping Modal
This is totally awesome overlapping modal!

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#overlapping-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="overlapping-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]    px-5 py-10"
    HTMLCloseTagHTMLOpenTagdiv class="text-center"HTMLCloseTag
                                            HTMLOpenTagdiv class="mb-5"HTMLCloseTag
                                                Click button bellow to show overlapping modal!
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTag!-- BEGIN: Overlapping Modal Toggle --HTMLCloseTag
                                            HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#next-overlapping-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 Overlapping ModalHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTag!-- END: Overlapping Modal Toggle --HTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag!-- BEGIN: Overlapping Modal Content --HTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="next-overlapping-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]    p-5 text-center"
    HTMLCloseTagThis is totally awesome overlapping modal!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag!-- END: Overlapping Modal Content --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Header & Footer Modal

Show example code
Show Modal

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#header-footer-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="header-footer-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]"
    HTMLCloseTagHTMLOpenTagdiv
        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
                                                Broadcast Message
                                            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"
    HTMLCloseTagHTMLOpenTagbutton
            data-tw-toggle="dropdown"
            aria-expanded="false"
            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/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"
        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
                                        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-form-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
        id="modal-form-1" 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"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-form-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
        id="modal-form-2" 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"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-form-3" 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
        Subject
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTaginput
        data-tw-merge
        id="modal-form-3" type="text" placeholder="Important Meeting" 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"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-form-4" 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
        Has the Words
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTaginput
        data-tw-merge
        id="modal-form-4" type="text" placeholder="Job, Work, Documentation" 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"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-form-5" 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
        Doesn't Have
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTaginput
        data-tw-merge
        id="modal-form-5" type="text" placeholder="Job, Work, Documentation" 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"
    /HTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                HTMLOpenTaglabel
        data-tw-merge
        for="modal-form-6" 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
        Size
    HTMLOpenTag/labelHTMLCloseTag
                                                HTMLOpenTagselect
        data-tw-merge
        id="modal-form-6" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 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 group-[.form-inline]:flex-1"
    HTMLCloseTag
        HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        class="px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400"
    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"
    HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Delete Modal

Show example code
Show Modal
Are you sure?
Do you really want to delete these records?
This process cannot be undone.

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#delete-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="delete-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]"
    HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="x-circle"
        class="stroke-1.5 w-5 h-5 mx-auto mt-3 h-16 w-16 text-danger mx-auto mt-3 h-16 w-16 text-danger"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagAre you sure?HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                Do you really want to delete these records? HTMLOpenTagbr /HTMLCloseTag
                                                This process cannot be undone.
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                            HTMLOpenTagbutton
        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-24 mr-1 w-24"
    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-danger border-danger text-white dark:border-danger w-24 w-24"
    HTMLCloseTagDeleteHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Success Modal

Show example code
Show Modal
Good job!
You clicked the button!

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#success-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="success-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]"
    HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                            HTMLOpenTagi
        data-tw-merge
        data-lucide="check-circle"
        class="stroke-1.5 w-5 h-5 mx-auto mt-3 h-16 w-16 text-success mx-auto mt-3 h-16 w-16 text-success"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagGood job!HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                You clicked the button!
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                            HTMLOpenTagbutton
        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 bg-primary border-primary text-white dark:border-primary w-24 w-24"
    HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Tiny Slider Modal

Show example code
Show Modal

                    HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        data-tw-toggle="modal" data-tw-target="#tiny-slider-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: Modal Toggle --HTMLCloseTag
                                HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-backdrop=""
        aria-hidden="true"
        tabindex="-1"
        id="tiny-slider-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]    p-5"
    HTMLCloseTagHTMLOpenTagdiv class="mx-6"HTMLCloseTag
                                            HTMLOpenTagdiv
        data-config="multiple-items"
        class="tiny-slider"
    HTMLCloseTag
        HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                    HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                        HTMLOpenTagimg
                                                            src="dist/images/fakers/preview-5.jpg"
                                                            alt="Midone - Tailwind Admin Dashboard Template"
                                                        /HTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                    HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                        HTMLOpenTagimg
                                                            src="dist/images/fakers/preview-2.jpg"
                                                            alt="Midone - Tailwind Admin Dashboard Template"
                                                        /HTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                    HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                        HTMLOpenTagimg
                                                            src="dist/images/fakers/preview-2.jpg"
                                                            alt="Midone - Tailwind Admin Dashboard Template"
                                                        /HTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                    HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                        HTMLOpenTagimg
                                                            src="dist/images/fakers/preview-4.jpg"
                                                            alt="Midone - Tailwind Admin Dashboard Template"
                                                        /HTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Programmatically Show/Hide Modal

Show example code
Show Modal
Hide Modal Toggle Modal

                    HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag
                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTaga
        data-tw-merge
        id="programmatically-show-modal" 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 mb-2 mr-1 mb-2 mr-1"
    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="programmatically-modal" 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]    p-10 text-center"
    HTMLCloseTagHTMLOpenTag!-- BEGIN: Hide Modal Toggle --HTMLCloseTag
                                        HTMLOpenTaga
        data-tw-merge
        id="programmatically-hide-modal" 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 mr-1 mr-1"
    HTMLCloseTagHide ModalHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTag!-- END: Hide Modal Toggle --HTMLCloseTag
                                        HTMLOpenTag!-- BEGIN: Toggle Modal Toggle --HTMLCloseTag
                                        HTMLOpenTaga
        data-tw-merge
        id="programmatically-toggle-modal" 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 mr-1 mr-1"
    HTMLCloseTagToggle ModalHTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTag!-- END: Toggle Modal Toggle --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Modal Content --HTMLCloseTag