<!--:Modal trigger:-->
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalDefault">
    Show modal
</button>

<!--:Modal Default:-->
<div id="modalDefault" role="dialog"
    class="modal fade fixed w-full h-full left-0 top-0" tabindex="-1">
    <div class="modal-dialog relative m-4 min-h-[calc(100%-2rem)] pointer-events-none">
        <!--:Modal content:-->
        <div
            class="modal-content relative max-w-[30rem] mx-auto bg-white dark:bg-stone-900 rounded-xl w-full pointer-events-auto">
            <!--:Close:-->
            <button type="button"
                class="absolute right-2 top-2 btn btn-default !p-0 !rounded-full size-8"
                data-bs-dismiss="modal">
                <span class="icon-[lucide--x] text-xl"></span>
            </button>
            <div class="p-4 lg:p-6">
                <h5 class="text-lg mb-2">Modal Title</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

<!--:Modal trigger:-->
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalFullWidth">
    Show modal
</button>

<!--:Modal Full Width:-->
<div id="modalFullWidth" role="dialog"
    class="modal fade fixed w-full h-full left-0 top-0" tabindex="-1">
    <div class="modal-dialog relative m-4 min-h-[calc(100%-2rem)] pointer-events-none">
        <!--:Modal content:-->
        <div class="modal-content relative max-w-full mx-auto bg-white dark:bg-stone-900 rounded-xl w-full pointer-events-auto">
            <!--:Close:-->
            <button type="button"
                class="absolute right-2 top-2 btn btn-default !p-0 !rounded-full size-8"
                data-bs-dismiss="modal">
                <span class="icon-[lucide--x] text-xl"></span>
            </button>
            <div class="p-4 lg:p-6">
                <h5 class="text-lg mb-2">Modal Title</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

<!--:Modal trigger:-->
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalCenter">
    Show modal
</button>

<!--:Modal Center + scroll:-->
<div id="modalCenter" role="dialog" class="modal fixed w-full h-full left-0 top-0"
    tabindex="-1">
    <div class="modal-dialog relative flex items-center justify-center m-4 h-[calc(100vh-2rem)] pointer-events-none">
        <!--:Modal content:-->
        <div
            class="modal-content relative overflow-hidden max-w-[30rem] mx-auto bg-white dark:bg-stone-900 rounded-xl w-full pointer-events-auto">
            <div class="p-4 border-b border-stone-100 dark:border-stone-800 flex items-center justify-between">
                <h5 class="text-lg">Modal Title</h5>
                <!--:Close:-->
                <button type="button"
                    class="btn btn-default !p-0 !rounded-full size-8"
                    data-bs-dismiss="modal">
                    <span class="icon-[lucide--x] text-xl"></span>
                </button>
            </div>
            <div class="h-[60vh] overflow-y-auto p-4">
                <p class="mb-4 text-lg">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>