Komponenten Anmeldeformular Komponente des Registrierungsformulars

Komponente des Registrierungsformulars

Eine reaktionsschnelle Registrierungsformularkomponente im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, die den Dunkelmodus unterstützen und Platzhalterbilder anzeigen.

Vorschau

HTML-Code

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
                <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
            </div>
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
    </form>
</div>

Verwandte Komponenten

Anmeldeformular

Eine minimalistische Komponente für das Registrierungsformular, die mit Tailwind CSS gestaltet ist und den Dunkelmodus und responsive Designfunktionen unterstützt.

Offen

Komponente des Registrierungsformulars

Eine reaktionsschnelle Komponente des Registrierungsformulars, die im brutalistischen Stil mit einem pastellfarbenen Farbschema gestaltet ist und für Geschäfts-/Unternehmenswebsites geeignet ist. Es bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente des Registrierungsformulars

Ein minimalistisches Flat-Design-Registrierungsformular mit responsiven Effekten und Unterstützung für dunkle Themen, das Tailwind CSS verwendet.

Offen