Enigma
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
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
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
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
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
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
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
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
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
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-6.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-7.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-15.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-8.jpg"
alt="Midone - Tailwind Admin Dashboard Template"
/HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Modal Content --HTMLCloseTag
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