<div class="flex-center gap-2">
        <div class="dropdown">
            <button class="dropdown-trigger button">Start</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>

        <div class="dropdown center">
            <button class="dropdown-trigger button">Center</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>

        <div class="dropdown end">
            <button class="dropdown-trigger button">End</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>
    </div>
    

    <div class="flex-center gap-2">
        <div class="dropdown top">
            <button class="dropdown-trigger button">Start</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>

        <div class="dropdown top center">
            <button class="dropdown-trigger button">Center</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>

        <div class="dropdown top end">
            <button class="dropdown-trigger button">End</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>
    </div>
    

    <div class="flex-center gap-2">
        <div class="dropdown left">
            <button class="dropdown-trigger button">Left</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>

        <div class="dropdown right">
            <button class="dropdown-trigger button">Right</button>
            <div class="dropdown-content">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
        </div>
    </div>
    

    <div class="dropdown focus-within top">
        <button class="dropdown-trigger button" tabindex="0">
            Open on focus
        </button>
        <div class="dropdown-content" tabindex="-1">
    <form class="box" style="width: 300px">
        <h1 class="mb-2 text-center">Login</h1>
        <input class="input mb-2" placeholder="Username" />
        <input class="input mb-2" type="password" placeholder="Password" />
        <button class="button primary w-full">Login</button>
    </form>
    </div>
    </div>