Modal

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles
Default modal
The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.
By clicking on the below button, you would see the default example of a modal with a header, body, and footer
Modal header
This is the body part of your modal!
You can put anything from simple text to forms and any other type of HTML tag in here to accomplish your desired look. 
 <div x-data="{showModal: true}">
    <button @click="showModal = true" class="btn btn-outline-primary">Open modal</button>
    
    <!-- Modal container -->
    <div x-show="showModal" class="modal">
        <!-- Modal inner -->
        <div class="modal-card" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
            <!-- Title / Close-->
            <header class="modal-header">
                <h5 class="text-black max-w-none">Modal header</h5>
                <button type="button" class="text-red-600 hover:text-red-700" @click="showModal = false">X</button>
            </header>
            
            <!-- content -->
            <div class="modal-body">
                This is the body part of your modal!
                <br>
                You can put anything from simple text to forms and any other type of HTML tag in here to accomplish your desired look.
            </div>
            
            <!-- Modal footer -->
            <footer class="modal-footer">
                <button @click="showModal = false" class="btn btn-sm btn-success">Ok!</button>
                <button @click="showModal = false" class="btn btn-sm btn-outline-danger">Cancel</button>
            </footer>
        </div>
        <!-- -->
    </div>
    <!-- End modal container -->
</div>
Modal sizing
The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.
By clicking on the below button, you would see the default example of a modal with a header, body, and footer
Size Class Mobile width Desktop width *
Small .modal-sm 60% 25%
Default None 75% 50%
Large .modal-lg 83.33% 60%
Extra large .modal-xl 91.66% 75%
Modal header
This is the body part of your modal!
You can put anything from simple text to forms and any other type of HTML tag in here to accomplish your desired look.
Modal header
This is the body part of your modal!
You can put anything from simple text to forms and any other type of HTML tag in here to accomplish your desired look.
Modal header
This is the body part of your modal!
You can put anything from simple text to forms and any other type of HTML tag in here to accomplish your desired look. 
 <div x-data="{showModal: true}">
    <button @click="showModal = true" class="btn btn-outline-primary">Small modal</button>
    
    <div x-show="showModal" class="modal">
        <div class="modal-card modal-sm" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
            ...
        </div>
    </div>
</div>

<div x-data="{showModal: true}">
    <button @click="showModal = true" class="btn btn-outline-primary">Large modal</button>
    
    <div x-show="showModal" class="modal">
        <div class="modal-card modal-lg" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
            ...
        </div>
    </div>
</div>

<div x-data="{showModal: true}">
    <button @click="showModal = true" class="btn btn-outline-primary">Extra large modal</button>
    
    <div x-show="showModal" class="modal">
        <div class="modal-card modal-xl" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
            ...
        </div>
    </div>
</div>