Modals

Basic Modal

        
        
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="standard-modal" data-hs-overlay="#standard-modal">
        Launch Demo Modal
        </button>

        <div id="standard-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#standard-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#standard-modal">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Scrolling Modal

        
        
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="long-content" data-hs-overlay="#long-content">
        Scrolling Long Content
        </button>

        <div id="long-content" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#long-content">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 h-50 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#long-content">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Toggle Modals

        
        
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="btw-modal" data-hs-overlay="#btw-modal">
        Toggle Between Modals
        </button> 

        <div id="btw-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#btw-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color"> 
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="btw-second-modal" data-hs-overlay="#btw-second-modal">
                            Open Second Modal
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="btw-second-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#btw-second-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 h-50 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="btw-modal" data-hs-overlay="#btw-modal">
                            Back to first
                        </button>
                    </div>
                </div>
            </div>
        </div>

Large Modal

        
         
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="large-modal" data-hs-overlay="#large-modal">
        Large Modal
        </button>  

        <div id="large-modal" class="p-3 size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#large-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#large-modal">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Medium Modal

        
        
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="medium-modal" data-hs-overlay="#medium-modal">
        Medium Modal
        </button>

        <div id="medium-modal" class="p-3 size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="md:max-w-xl m-3 md:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#medium-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#medium-modal">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Small Modal

        
        
        <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="small-modal" data-hs-overlay="#small-modal">
        Small Modal
        </button> 

        <div id="small-modal" class="p-3 size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#small-modal">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#small-modal">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Modal Screen Sizes

        
        
        <div class="flex items-center gap-6">
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="full-screen" data-hs-overlay="#full-screen">
                Full screen
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="sm-screen" data-hs-overlay="#sm-screen">
                Full screen below sm
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="md-screen" data-hs-overlay="#md-screen">
                Full screen below md
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="lg-screen" data-hs-overlay="#lg-screen">
                Full screen below lg
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="xl-screen" data-hs-overlay="#xl-screen">
                Full screen below xl
            </button>  
        </div>

        <div id="full-screen" class="size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="max-w-full max-h-full h-full">
                <div class="flex justify-between h-full flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#full-screen">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            ......
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#full-screen">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="sm-screen" class="size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="sm:max-w-lg sm:max-h-none sm:h-auto sm:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#sm-screen">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            ......
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#sm-screen">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="md-screen" class="size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="max-w-full max-h-full h-full md:hs-overlay-open:mt-10 md:mt-0 md:max-w-lg md:max-h-none md:h-auto md:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#md-screen">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            ......
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#md-screen">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="lg-screen" class="size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="max-w-full max-h-full h-full lg:hs-overlay-open:mt-10 lg:mt-0 lg:max-w-lg lg:max-h-none lg:h-auto lg:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#lg-screen">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            ......
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#lg-screen">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="xl-screen" class="size-full hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="max-w-full max-h-full h-full xl:hs-overlay-open:mt-10 xl:mt-0 xl:max-w-xl xl:max-h-none xl:h-auto xl:mx-auto">
                <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                    <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                        <h4>Modal Title</h4>
                        <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#xl-screen">
                            <i class="icon-x"></i>
                        </button>
                    </div>
                    <div class="py-5 overflow-y-auto">
                        <p class="mt-1 text-gray-800 dark:text-neutral-400">
                            ......
                        </p>
                    </div>
                    <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#xl-screen">
                            Close
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

Modal Directions

        
        
        <div class="flex items-center gap-6">
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="center-modal" data-hs-overlay="#center-modal">
                Center Modal
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="top-modal" data-hs-overlay="#top-modal">
                Top Modal
            </button> 
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="bottom-modal" data-hs-overlay="#bottom-modal">
                Bottom Modal
            </button>
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="left-modal" data-hs-overlay="#left-modal">
                Left Modal
            </button>
            <button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="right-modal" data-hs-overlay="#right-modal">
                Right Modal
            </button> 
        </div> 

        <div id="center-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="min-h-screen flex items-center justify-center px-4"> 
                <div class="sm:max-w-lg sm:w-full sm:mx-auto">
                    <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                        <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                            <h4>Modal Title</h4>
                            <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#center-modal">
                                <i class="icon-x"></i>
                            </button>
                        </div>
                        <div class="py-5 overflow-y-auto">
                            <p class="mt-1 text-gray-800 dark:text-neutral-400">
                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                Praesent commodo cursus magna,  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                        </div>
                        <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#center-modal">
                                Close
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <div id="top-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="min-h-screen flex justify-center px-4"> 
                <div class="sm:max-w-lg sm:w-full sm:mx-auto">
                    <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                        <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                            <h4>Modal Title</h4>
                            <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#top-modal">
                                <i class="icon-x"></i>
                            </button>
                        </div>
                        <div class="py-5 overflow-y-auto">
                            <p class="mt-1 text-gray-800 dark:text-neutral-400">
                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                Praesent commodo cursus magna,  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                        </div>
                        <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#top-modal">
                                Close
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <div id="bottom-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="min-h-screen flex items-end px-4"> 
                <div class="sm:max-w-lg sm:w-full sm:mx-auto">
                    <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                        <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                            <h4>Modal Title</h4>
                            <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#bottom-modal">
                                <i class="icon-x"></i>
                            </button>
                        </div>
                        <div class="py-5 overflow-y-auto">
                            <p class="mt-1 text-gray-800 dark:text-neutral-400">
                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                Praesent commodo cursus magna,  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                        </div>
                        <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#bottom-modal">
                                Close
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <div id="left-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="min-h-screen flex items-center justify-start px-4"> 
                <div class="sm:max-w-lg sm:w-full">
                    <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                        <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                            <h4>Modal Title</h4>
                            <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#left-modal">
                                <i class="icon-x"></i>
                            </button>
                        </div>
                        <div class="py-5 overflow-y-auto">
                            <p class="mt-1 text-gray-800 dark:text-neutral-400">
                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                Praesent commodo cursus magna,  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                        </div>
                        <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#left-modal">
                                Close
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <div id="right-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
            <div class="min-h-screen flex items-center justify-end px-4"> 
                <div class="sm:max-w-lg sm:w-full">
                    <div class="flex flex-col bg-white border p-6 border-border-color rounded-lg pointer-events-auto">
                        <div class="flex justify-between items-center pb-5 border-b border-border-color dark:border-neutral-700">
                            <h4>Modal Title</h4>
                            <button type="button" class="size-9 inline-flex justify-center items-center rounded-full border border-border-color bg-white text-gray-900 text-xl hover:bg-danger hover:border-danger hover:text-white dark:hover:text-white focus:outline-hidden focus:bg-danger cursor-pointer" aria-label="Close" data-hs-overlay="#right-modal">
                                <i class="icon-x"></i>
                            </button>
                        </div>
                        <div class="py-5 overflow-y-auto">
                            <p class="mt-1 text-gray-800 dark:text-neutral-400">
                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                Praesent commodo cursus magna,  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                        </div>
                        <div class="flex justify-end items-center gap-x-2 pt-5 border-t border-border-color">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-border-color bg-white text-dark shadow-2xs hover:bg-primary hover:text-white focus:outline-hidden focus:bg-primary disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#right-modal">
                                Close
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-hover focus:outline-hidden focus:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                                Save Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>  
        </div>