Modals

Dastone
/
Ui Kit
/
Modals

Modal Sizing


<button type="button" data-fc-type="modal" data-fc-target="modalstandard" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Standerd
</button>

<button type="button" data-fc-type="modal" data-fc-target="smallmodal" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Small
</button>

<button type="button" data-fc-type="modal" data-fc-target="largemodal" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Large
</button>

<button type="button" data-fc-type="modal" data-fc-target="extralargemodal" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Extra Large
</button>

<button type="button" data-fc-type="modal" data-fc-target="fullwidthmodal" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Full Width
</button>
 <!-- Standard Modal -->
<div class="modal animate-ModalSlide hidden" id="modalstandard">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- Small Modal -->
<div class="modal animate-ModalSlide hidden" id="smallmodal">
    <div class="relative w-auto pointer-events-none  sm:my-7 sm:mx-auto z-[99] sm:max-w-xs">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close"  data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>                    
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Large Modal -->
<div class="modal animate-ModalSlide hidden" id="largemodal">
    <div class="relative w-auto pointer-events-none  sm:my-7 sm:mx-auto z-[99] lg:max-w-4xl">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>                    
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Extra Large Modal -->
<div class="modal animate-ModalSlide hidden" id="extralargemodal">
    <div class="relative w-auto pointer-events-none  sm:my-7 sm:mx-auto z-[99] xl:max-w-6xl">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>                    
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Full Width Modal -->
<div class="modal animate-ModalSlide hidden" id="fullwidthmodal">
    <div class="relative pointer-events-none  sm:mx-auto z-[99] max-w-none w-[100%]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded h-screen">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>                    
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

Modal Position


<button type="button" data-fc-type="modal" data-fc-target="modalcenter" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Center Modal
</button>

<button type="button" data-fc-type="modal" data-fc-target="modaltop" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Top Modal
</button>

<button type="button" data-fc-type="modal" data-fc-target="modalbottom" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Bottom Modal
</button>

<button type="button" data-fc-type="modal" data-fc-target="modalright" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Rightbar Modal
</button>

<button type="button" data-fc-type="modal" data-fc-target="modalstatic" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Static Modal
</button>
<button type="button" data-fc-type="modal" data-fc-target="modalscrollable" class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded ">
    Scrollable Modal
</button>

<!-- Right Modal -->
<div class="modal hidden" id="modalright">
    <div class="pointer-events-none sm:max-w-lg sm:mx-auto z-[99] fixed top-0 right-0 flex flex-nowrap justify-center h-full w-72 m-0  bg-white dark:bg-gray-600 items-center animate-none transition-all delay-0 duration-500 ease-in">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded border-0 text-center shadow-none h-full my-auto">
            <div class="flex shrink-0 mx-auto w-full items-center justify-between py-2 px-4  border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>                    
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- bottom Modal -->
<div class="modal animate-ModalSlide hidden" id="modalbottom">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-0 sm:mx-auto z-[99] flex h-full my-0 mx-auto content-center justify-end flex-nowrap flex-col">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- top Modal -->
<div class="modal animate-ModalSlide hidden" id="modaltop">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-0 sm:mx-auto z-[99] my-0 mx-auto">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Center Modal -->
<div class="modal animate-ModalSlide hidden" id="modalcenter">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-0 sm:mx-auto z-[99] flex items-center h-[calc(100%-3.5rem)]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Static Modal -->
<div class="modal animate-ModalSlide hidden" id="modalstatic" data-backdrop="static">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- scrollable Modal -->
<div class="modal animate-ModalSlide hidden" id="modalscrollable">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]  h-96 max-h-full overflow-y-auto">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded overflow-hidden max-h-full">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-slate-300 mt-0" id="staticBackdropLabel1">Modal Heading</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed overflow-y-auto">
                <p class="font-semibold text-base">Title Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, pariatur.</p>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <p class="font-semibold text-base mt-3">Subtitle Text</p>
                <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos voluptas saepe officia! Aperiam deleniti laboriosam quo neque non quia, facere, dignissimos impedit fuga hic at culpa iusto similique ad laudantium
                    nesciunt, error consectetur voluptatem ipsa vitae accusamus eaque nihil!
                </p>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

Themes Modal

                                       
<button type="button" data-fc-type="modal" data-fc-target="modal-primary" class="px-2 py-1 lg:px-4 bg-transparent  text-primary text-sm  rounded transition hover:bg-primary-500 hover:text-white border border-primary font-medium">
    Primary
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-slate" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium  focus:outline-none  rounded transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
    Alternative
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-red" class="px-2 py-1 lg:px-4 bg-transparent  text-red text-sm  rounded transition hover:bg-red-600 hover:text-white border border-red font-medium">
    Red
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-green" class="px-2 py-1 lg:px-4 bg-transparent  text-green text-sm  rounded transition hover:bg-green-600 hover:text-white border border-green font-medium">
    Green
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-yellow" class="px-2 py-1 lg:px-4 bg-transparent  text-yellow text-sm  rounded transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium">
    Yellow
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-pink" class="px-2 py-1 lg:px-4 bg-transparent  text-pink text-sm  rounded transition hover:bg-pink-600 hover:text-white border border-pink font-medium">
    Pink
</button>
<button type="button" data-fc-type="modal" data-fc-target="modal-dark" class="px-2 py-1 lg:px-4 bg-transparent  text-slate-900 dark:text-slate-500 text-sm  rounded transition hover:bg-slate-800 dark:hover:bg-slate-700/40 hover:text-white border border-slate-900 dark:border-slate-700 font-medium">
    Dark
</button>
<!--Theme color modal-->

<!--Primary Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-primary">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-primary-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Primary Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-primary-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Slate Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-slate">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Slate Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Green Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-green">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-green-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Green Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-green-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-green-500 hover:bg-green-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-green-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-green-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Yellow Modal-->
<div class="modal animate-ModalSlide  hidden" id="modal-yellow">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-yellow-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Green Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-yellow-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-yellow-500 hover:bg-yellow-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-yellow-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-yellow-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Pink Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-pink">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-pink-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Pink Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-pink-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-pink-500 hover:bg-pink-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-pink-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-pink-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Red Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-red">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-red-500">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Green Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-red-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Dark Modal-->
<div class="modal animate-ModalSlide hidden" id="modal-dark">
    <div class="relative w-auto pointer-events-none sm:max-w-lg sm:my-7 sm:mx-auto z-[99]">
        <div class="relative flex flex-col w-full pointer-events-auto bg-white dark:bg-slate-800 bg-clip-padding rounded">
            <div class="flex shrink-0 items-center justify-between py-2 px-4 rounded-t border-b border-solid dark:border-gray-700 bg-slate-800">
                <h6 class="mb-0 leading-4 text-base font-semibold text-white mt-0" id="staticBackdropLabel1">Dark Modal</h6>
                <button type="button" class="box-content w-4 h-4 p-1 bg-slate-700/60 rounded-full text-slate-300 leading-4 text-xl close" aria-label="Close" data-fc-dismiss>&times;</button>
            </div>
            <div class="relative flex-auto p-4 text-slate-600 dark:text-gray-300 leading-relaxed">
                <div class="grid grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
                    <div class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4">
                        <img src="assets/images/widgets/rocket.gif" alt="" class="h-32 w-32">
                    </div>
                    <div class="col-span-12 md:col-span-12 lg:col-span-8 xl:col-span-8">
                        <h5 class="text-gray-700 mr-3 dark:text-slate-200 text-lg font-medium">Crypto Market Services</h5>
                        <p class="truncate text-gray-500 dark:text-slate-500 text-sm font-normal">
                            <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Disable Services</span>
                            07 Oct 2023
                        </p>
                        <ul class="list-disc list-inside mt-3">
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Lorem Ipsum is dummy text.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">It is a long established reader.</li>
                            <li class="mb-1 text-slate-700 dark:text-slate-400 text-sm">Contrary to popular belief, Lorem simply.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap shrink-0 justify-end p-3  rounded-b border-t border-dashed dark:border-gray-700">
                <button class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500  text-sm font-medium py-1 px-3 rounded mr-1 close" data-fc-dismiss>Close</button>
                <button class="inline-block focus:outline-none text-slate-800 hover:bg-slate-800 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-800  text-sm font-medium py-1 px-3 rounded">Save</button>
            </div>
        </div>
    </div>
</div>

Mannat Themes

Modals

Modal Sizing

Modal Heading

Modal Heading

Modal Heading

Modal Heading

Modal Heading

Modal Position

Modal Heading

Modal Heading

Modal Heading

Modal Heading

Modal Heading

Modal Heading

Themes Modal

Primary Modal

Crypto Market Services

Slate Modal

Crypto Market Services

Green Modal

Crypto Market Services

Green Modal

Crypto Market Services

Pink Modal

Crypto Market Services

Green Modal

Crypto Market Services

Dark Modal

Crypto Market Services