CCHub Logo CCHub Tailwind Collection
Komponenten Login-Formular Brutalistisches Anmeldeformular

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.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="flex justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
            </div>
            <button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
        </div>
        <div class="mt-8 text-center">
            <img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</p>
        </div>
    </div>
</div>

Verwandte Komponenten

Neumorphism Login-Formular

Eine Anmeldeformularkomponente im Neumorphism-Stil für ein Dashboard mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Komponente des Anmeldeformulars

Ein einfaches und reaktionsschnelles Anmeldeformular, das in einem skeuomorphen Stil gestaltet ist, der reale Elemente mit einem lebendigen Farbschema nachahmt. Es eignet sich für Social-Media-Schnittstellen und unterstützt den Dunkelmodus.

Offen

Minimalistisches E-Commerce-Anmeldeformular

Ein minimalistisches und flaches Design-Anmeldeformular mit Pastellfarben, das für E-Commerce-Websites entwickelt wurde. Es ist einfach, reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen