CCHub Logo CCHub Tailwind Collection
Komponenten Login-Formular Komponente des Anmeldeformulars

Komponente des Anmeldeformulars

Eine reaktionsschnelle Anmeldeformular-Komponente, die im Glassmorphism-Stil entwickelt wurde und Milchglaseffekte, Unschärfeeffekte und Unterstützung für den Dunkelmodus mit Tailwind CSS enthält.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente des Anmeldeformulars

Eine saubere, vom Code inspirierte Anmeldeformularkomponente mit Monospace-Schriftarten und coolen neutralen Farben, die für Marktplatzplattformen geeignet ist. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Brutalist_Login_Form_Travel_Tourism

Ein Anmeldeformular mittlerer Komplexität im brutalistischen Stil mit leuchtenden Farben, das für Reise- und Tourismus-Websites entwickelt wurde. Verfügt über hohen Kontrast, fette Typografie und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Skeuomorphes Anmeldeformular

Ein einfaches Skeuomorphes Anmeldeformular mit triadischen Farben für Dashboard-Zwecke, mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen