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

Komponente des Anmeldeformulars

Eine minimalistische Login-Formularkomponente mit einem triadischen Farbschema, das für die Präsentation von Portfolios mit Unterstützung des Dunkelmodus geeignet ist.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Skeuomorphes Anmeldeformular

Eine skeuomorphe Anmeldeformularkomponente mit einem Graustufen-Farbschema und komplexer Komplexität, die für eine Portfolio-Website entwickelt wurde. Es ist reaktionsschnell und unterstützt dunkles Design.

Offen

Brutalistisches Anmeldeformular

Eine einfache, brutalistisch gestaltete Anmeldeformular-Komponente, die für Technologie-/SaaS-Anwendungen entwickelt wurde, mit hohem Kontrast, fetter Typografie und einem analogen Farbschema mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

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.

Offen