فرم ورود

<div
    class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-surface-1 [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10">
    <div class="col-start-3 row-start-3 max-sm:col-span-full flex flex-col w-full sm:w-sm p-2">
        <div class="flex flex-col items-center gap-y-2.5 py-6">
            <a href="#" class="inline-flex dark:invert">
                <img src="https://blocks.spacedev.ir/images/logo.svg" class="w-28" alt="..." />
            </a>
            <p class="font-medium max-sm:text-xs text-surface-2-content text-center">
                ایده‌هات رو سریع‌تر از همیشه بساز
            </p>
        </div>

        <div class="bg-surface rounded-xl inset-shadow-xs inset-shadow-surface-content/10 shadow-lg p-5">
            <form action="#" method="post" class="space-y-6">
                <div class="space-y-4">
                    <!-- Email -->
                    <div class="flex flex-col items-start gap-y-2">
                        <label for="email" class="font-semibold text-xs">آدرس ایمیل:</label>
                        <input type="email" dir="ltr" name="email" id="email"
                            class="block w-full h-9 bg-surface border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-sans font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 px-3" />
                    </div>

                    <!-- Password -->
                    <div class="flex flex-col items-start gap-y-2">
                        <label for="password" class="font-semibold text-xs">رمز
                            عبور:</label>
                        <div class="relative w-full" x-data="{ showPassword: false, value: '' }">
                            <input x-bind:type="showPassword ? 'text' : 'password'" dir="ltr" name="password"
                                id="password" x-model="value"
                                class="block w-full h-9 bg-surface border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-sans font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 px-3" />

                            <button type="button"
                                class="absolute inset-y-1 right-1 flex items-center justify-center w-7 bg-surface rounded-md cursor-pointer outline-hidden disabled:text-surface-2-content/50 disabled:cursor-not-allowed"
                                x-bind:disabled="value.length === 0" x-on:click="showPassword = !showPassword">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="icon icon-tabler-external-link size-4"
                                    x-show="!showPassword">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                                    <path
                                        d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                                    </path>
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="icon icon-tabler-external-link size-4"
                                    x-show="showPassword">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
                                    <path
                                        d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87">
                                    </path>
                                    <path d="M3 3l18 18"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between gap-2">
                    <!-- Remember me -->
                    <label for="remember" class="flex items-center gap-x-2 group/input">
                        <span class="shrink-0 grid grid-cols-1 size-4">
                            <input type="checkbox" name="remember" id="remember"
                                class="col-start-1 row-start-1 appearance-none size-4 bg-surface border rounded-sm checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-content/10 disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 transition-colors duration-200 ease-in-out" />
                            <svg class="col-start-1 row-start-1 size-4 stroke-surface cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-not-allowed group-has-disabled/input:stroke-surface-content/30"
                                viewBox="0 0 14 14" fill="none">
                                <path class="opacity-0 group-has-checked/input:opacity-100 transition-opacity ease-out"
                                    d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path class="opacity-0 group-has-checked/input:opacity-100 transition-opacity ease-out"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </span>
                        <span
                            class="grow font-semibold text-xs text-surface-2-content cursor-pointer select-none transition-colors group-has-checked/input:text-surface-content group-has-disabled/input:cursor-default">
                            مرا بخاطر بسپار
                        </span>
                    </label>

                    <a href="#" class="font-semibold text-2xs cursor-pointer hover:underline">
                        بازیابی رمز عبور؟
                    </a>
                </div>

                <button type="submit"
                    class="inline-flex items-center justify-center w-full h-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-neutral-400 disabled:border-neutral-400 hover:bg-neutral-500/90 px-3">
                    ورود به حساب کاربری
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 ms-2">
                        <path
                            d="M4.75 2A2.75 2.75 0 0 0 2 4.75v6.5A2.75 2.75 0 0 0 4.75 14h3a2.75 2.75 0 0 0 2.75-2.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-6.5c0-.69.56-1.25 1.25-1.25h3C8.44 3.5 9 4.06 9 4.75v.5a.75.75 0 0 0 1.5 0v-.5A2.75 2.75 0 0 0 7.75 2h-3Z" />
                        <path
                            d="M8.03 6.28a.75.75 0 0 0-1.06-1.06L4.72 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h7.19a.75.75 0 0 0 0-1.5H7.06l.97-.97Z" />
                    </svg>
                </button>
            </form>
        </div>
    </div>
    <div
        class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed max-sm:hidden">
    </div>
    <div
        class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed max-sm:hidden">
    </div>
    <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg) max-sm:hidden">
    </div>
    <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg) max-sm:hidden"></div>
</div>