CCHub Logo CCHub Tailwind Collection
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

Komponente des Registrierungsformulars

Eine reaktionsschnelle Komponente für das Buchungs-/Reservierungsregistrierungsformular mit einer Benutzeroberfläche im Dunkelmodus und einem Neon-/Elektro-Farbschema, das für Termin- und Reservierungssysteme entwickelt wurde.

Offen

Komponente des Registrierungsformulars

Eine reaktionsschnelle Komponente für das Registrierungsformular mit einem skeuomorphen Design, einem gedämpften Farbschema und Unterstützung für den Dunkelmodus, die für Reise- und Tourismus-Websites geeignet ist. Es ahmt reale Elemente wie geprägte Tasten und vertiefte Eingabefelder nach.

Offen

Komponente des Registrierungsformulars

Eine responsive Komponente des Registrierungsformulars, die mit einem skeuomorphen Stil gestaltet wurde, ein monochromatisches Farbschema verwendet und auf E-Commerce-Erlebnisse zugeschnitten ist. Es unterstützt den Dunkelmodus und enthält interaktive Eingabefunktionen für die Benutzerregistrierung.

Offen