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 Registrierungsformularkomponente mit einem Glassmorphism-Stil, einem Erdton-Farbschema und Unterstützung für ein dunkles Design. Entwickelt für Social-Media-Plattformen, mit einem einfachen Layout und minimalen Elementen. Verwendet Tailwind CSS für das Styling und enthält Beispielbildplatzhalter.

Offen

Komponente des Registrierungsformulars

Eine komplexe, reaktionsschnelle Komponente für das Registrierungsformular mit einem Farbschema für Wald/Grün-Farbverlauf, sanften Übergängen und Unterstützung für den Dunkelmodus, die für Bildungsplattformen geeignet ist.

Offen

Komponente des Registrierungsformulars

Eine komplexe, reaktionsschnelle Komponente für Registrierungsformulare für Finanz-/Bankanwendungen mit einem klaren, minimalistischen Design mit kontrastreichen Farben, starker Typografie und rasterbasiertem Layout. Enthält Unterstützung für den Dunkelmodus.

Offen