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 Registrierungsformularkomponente mit 3D-Designästhetik mit Sepia-/Brauntönen, die für Social-Media-Anwendungen geeignet ist. Es unterstützt den Dunkelmodus und verwendet semantisches HTML für die Barrierefreiheit.

Offen

Komponente des Registrierungsformulars

Eine reaktionsschnelle Komponente des Registrierungsformulars, die in einem neumorphen Stil mit gedämpften/entsättigten Farben entworfen wurde und für eine Dashboard-Umgebung geeignet ist. Es unterstützt den Dunkelmodus und verwendet subtile Schatten, um einen extrudierten Effekt zu erzeugen.

Offen

Komponente des Registrierungsformulars

Eine einfache, reaktionsschnelle Komponente des Registrierungsformulars mit Neon-/Leuchteffekten, einem coolen neutralen Farbschema und Unterstützung für den Dunkelmodus, geeignet für fotografiebezogene Websites.

Offen