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

Komponente des Anmeldeformulars

Eine skeuomorphe Login-Formularkomponente mit lebendigen Farben und moderater Komplexität, die für ein Portfolio geeignet ist.

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 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-6">Login</h2>
        <img src="https://picsum.photos/200/100" alt="Decorative Header Image" class="rounded-lg w-full mb-4" />
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" name="email" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" name="password" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <button type="submit" class="bg-vibrant-600 dark:bg-vibrant-500 text-white font-bold py-2 rounded-lg w-full hover:bg-vibrant-700 dark:hover:bg-vibrant-400 transition duration-300 ease-in-out">Log In</button>
        </form>
        <div class="flex items-center justify-between mt-4">
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Forgot Password?</a>
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Sign Up</a>
        </div>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mx-auto mt-4" />
    </div>
</div>

Verwandte Komponenten

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

Skeuomorphes Anmeldeformular

Ein responsives Anmeldeformular mit Skeuomorphismus-Design, monochromatischem Farbschema und moderater Komplexität, das für Social-Media-Plattformen entwickelt wurde. Enthält Unterstützung für den Dunkelmodus mit Tailwind CSS.

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