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

Komponente des Anmeldeformulars

Eine reaktionsschnelle Login-Formularkomponente im Glassmorphism-Stil mit durchscheinenden Elementen mit Unschärfeeffekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">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="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
                </div>
                <a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
    </div>
</div>

Verwandte Komponenten

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

Brutalistisches Anmeldeformular

Ein komplexes, responsives Anmeldeformular, das in einem brutalistischen Stil mit Erdtönen gestaltet ist, auf E-Commerce-Anwendungen zugeschnitten ist und den Dunkelmodus unterstützt.

Offen

Komponente des Anmeldeformulars

Anmeldeformularkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen