<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>donotwrite.me - Email</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex h-screen flex-col pb-6 bg-gray-50 dark:bg-neutral-900">
    <header class="sticky inset-x-0 top-0 z-50 flex w-full flex-wrap text-sm md:flex-nowrap md:justify-start">
        <nav class="relative mx-2 mt-4 w-full max-w-2xl rounded-2xl border border-gray-200 bg-white py-2.5 md:mx-auto md:flex md:items-center md:justify-between md:px-4 md:py-0 dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex items-center justify-between px-4 md:px-0">
                <!-- Logo -->
                <div>
                    <a class="inline-block flex-none rounded-md text-xl font-semibold focus:opacity-80 focus:outline-none" href="/" aria-label="Logo">
                        <svg class="h-auto w-32" xmlns="http://www.w3.org/2000/svg" viewBox="152.64 50.6 194.72 48.8">
                            <!-- A placeholder SVG can be replaced with your actual logo -->
                            <text x="50%" y="50%" fill="#444" font-size="64" font-family="Arial Black" text-anchor="middle">LOGO</text>
                        </svg>
                    </a>
                </div>
                <!-- End Logo -->
                <div class="md:hidden">
                    <!-- Toggle Button -->
                    <button type="button" class="hs-collapse-toggle flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" id="hs-navbar-header-floating-collapse" aria-label="Toggle navigation" data-hs-collapse="#hs-navbar-header-floating">
                        <svg class="hs-collapse-open:hidden h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="3" y1="6" x2="21" y2="6"/>
                            <line x1="3" y1="12" x2="21" y2="12"/>
                            <line x1="3" y1="18" x2="21" y2="18"/>
                        </svg>
                        <svg class="hs-collapse-open:block hidden h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6 6 18"/>
                            <path d="m6 6 12 12"/>
                        </svg>
                    </button>
                    <!-- End Toggle Button -->
                </div>
            </div>
            <div id="hs-navbar-header-floating" class="hs-collapse hidden md:block">
                <div class="mt-3 flex flex-col gap-2 py-2 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-3 md:py-0 md:ps-7">
                    <a href="http://mail.donotwrite.me:8080/SOGo/" class="inline-flex items-center gap-x-2 px-4 py-3 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 focus:bg-gray-50 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                        Sign in
                        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </header>
    <!-- ========== END HEADER ========== -->
    <main class="flex h-full flex-col justify-center">
        <section class="mx-auto -mt-20 w-full max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <h1 class="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
                Create your <span class="text-blue-600">@donotwrite.me</span> box
            </h1>
            <p class="mt-3 text-gray-600 dark:text-neutral-400">Just for free now. Simple, fast & easy</p>
        </section>
        <!-- Sign Up -->
        <section class="mx-auto mt-10 w-full max-w-2xl px-4 sm:px-6 lg:px-8">
            <div class="relative flex rounded-lg shadow-sm">
                <input type="text" id="signup" name="signup" class="block w-full rounded-l-lg border border-gray-300 px-4 py-3 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Username">
                <span class="absolute inset-y-0 left-0 flex items-center pl-4">
                    <svg class="h-4 w-4 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="4"/>
                        <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>
                    </svg>
                </span>
                <a href="https://donotwritemebot.t.me" class="inline-block rounded-r-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white hover:bg-blue-700 focus:bg-blue-700 focus:outline-none">Sign up</a>
            </div>
        </section>
        <!-- End Sign Up -->
    </main>
    <footer class="mx-auto mt-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
        <p class="text-xs text-gray-600 dark:text-neutral-500">© 2024 donotwrite.me</p>
    </footer>
</body>
</html>

почини ошибки, сделай строже и красивее пон