<button class="button" onclick="toggleModal('[data-modal-1]')">
        Login
    </button>

    <div class="modal" data-modal-1>
        <button
            class="modal-close"
            onclick="toggleModal('[data-modal-1]')"
        ></button>
        <div class="modal-bg" onclick="toggleModal('[data-modal-1]')"></div>

        <div class="modal-content" style="width: 320px">
            <div class="box flex flex-col gap-3">
                <h2 class="text-center">Login</h2>
                <div class="field w-full">
                    <div class="control">
                        <div class="icon">
                            <i class="fa-solid fa-user"></i>
                        </div>
                        <input
                            class="input"
                            type="text"
                            placeholder="Username"
                        />
                    </div>
                </div>
                <div class="field w-full">
                    <div class="control">
                        <div class="icon">
                            <i class="fa-solid fa-key"></i>
                        </div>
                        <input
                            class="input"
                            type="password"
                            placeholder="Password"
                        />
                        <div class="icon">
                            <i class="fa-solid fa-eye-slash"></i>
                        </div>
                    </div>
                </div>
                <button class="button primary w-full">Login</button>
            </div>
        </div>
    </div>
    

    <button class="button" onclick="toggleModal('[data-drawer-102]')">
        Drawer right
    </button>

    <button class="button" onclick="toggleModal('[data-drawer-103]')">
        Drawer left
    </button>

    <button class="button" onclick="toggleModal('[data-drawer-104]')">
        Drawer top
    </button>

    <button class="button" onclick="toggleModal('[data-drawer-105]')">
        Drawer bottom
    </button>

    <div class="modal drawer" data-drawer-102>
        <div class="modal-bg" onclick="toggleModal('[data-drawer-102]')"></div>
        <div class="modal-content box minimal p-0">
            <h1 class="p-3 text-center">Right</h1>
            <ul class="menu minimal">
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <hr />
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
    </div>

    <div class="modal drawer left" data-drawer-103>
        <div class="modal-bg" onclick="toggleModal('[data-drawer-103]')"></div>
        <div class="modal-content box minimal p-0">
            <h1 class="p-3 text-center">Left</h1>
            <ul class="menu minimal">
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <hr />
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
    </div>

    <div class="modal drawer top" data-drawer-104>
        <div class="modal-bg" onclick="toggleModal('[data-drawer-104]')"></div>
        <div class="modal-content box minimal p-0">
            <h1 class="p-3 text-center">Top</h1>
            <ul class="menu minimal">
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <hr />
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
    </div>

    <div class="modal drawer bottom" data-drawer-105>
        <div class="modal-bg" onclick="toggleModal('[data-drawer-105]')"></div>
        <div class="modal-content box minimal p-0">
            <h1 class="p-3 text-center">Bottom</h1>
            <ul class="menu minimal">
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <hr />
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
    </div>
    

    <button
        class="button hidden-tablet mb-2"
        onclick="toggleModal('[data-drawer-1]')"
    >
        Adaptive Drawer
    </button>
    <p>Resize your screen to see the adaptive drawer behavior.</p>