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

Komponente des Anmeldeformulars

Eine einfache Login-Formular-Komponente, die in einem brutalistischen Stil mit Erdtönen gestaltet ist, sich für Blog-/Content-Zwecke eignet und sowohl für helle als auch für dunkle Themen optimiert ist.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-brown-500 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border 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 focus:ring-brown-300" id="username" type="text" placeholder="Enter your username" required />
            </div>
            <div class="mb-6">
                <label class="block text-white text-sm font-bold 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-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="password" type="password" placeholder="Enter your password" required />
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

Verwandte Komponenten

Login-Formular-Komponente 37

Eine responsive Anmeldeformularkomponente, die im Material Design-Stil mit Tailwind CSS entworfen wurde und den Dunkelmodus unterstützt.

Offen

Komponente des Anmeldeformulars

Ein reaktionsschnelles, komplexes Anmeldeformular mit einem minimalistischen/flachen Design, das für einen Blog oder eine Content-Site geeignet ist. Es verfügt über ein monochromatisches Farbschema, Unterstützung für dunkle Themen und mehrere interaktive Elemente, die ausschließlich mit HTML und Tailwind CSS implementiert sind.

Offen

Komponente des Anmeldeformulars

Eine reaktionsschnelle Anmeldeformularkomponente mit Bauhaus-inspiriertem Design, warmem, neutralem Farbschema und Unterstützung des Dunkelmodus, geeignet für Finanz- und Bankanwendungen.

Offen