CCHub Logo CCHub Tailwind Collection
Komponenten Anmeldeformular Komponente des Registrierungsformulars

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" 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="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
            </div>
            <button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
        </form>
        <div class="mt-4 text-center">
            <img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente des Registrierungsformulars

Eine reaktionsschnelle Komponente des Registrierungsformulars mit einem glassmorphism-Design, einem Graustufen-Farbschema und Unterstützung für dunkle Themen, geeignet für Geschäfts-/Unternehmenswebsites.

Offen

Komponente des Registrierungsformulars

Eine minimalistische und reaktionsschnelle Registrierungsformular-Komponente, die mit Tailwind CSS entwickelt wurde, den Dunkelmodus unterstützt und saubere Räume mit minimalen Elementen bietet.

Offen

Anmeldeformular für Brutalismus

Registrierungsformular-Komponente mit Brutalismus-Design, triadischem Farbschema und einfacher Komplexität, geeignet für ein Dashboard. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen