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

Komponente des Anmeldeformulars

Eine responsive Login-Formular-Komponente, die nach den Prinzipien des Material Designs entworfen und mit Tailwind CSS gestaltet wurde. Es verfügt über ein Farbschema in Erdtönen und ein einfaches Layout, das für einen Blog oder eine Plattform zum Konsum von Inhalten geeignet ist, mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
            </div>
            <div class="flex items-center justify-between">
                <button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">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-green-500 hover:text-green-400">Sign up</a>
        </p>
    </div>
</div>

Verwandte Komponenten

Komponente des Anmeldeformulars

Eine saubere, vom Code inspirierte Anmeldeformularkomponente mit Monospace-Schriftarten und coolen neutralen Farben, die für Marktplatzplattformen geeignet ist. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Komponente des Anmeldeformulars

Eine reaktionsschnelle Anmeldeformularkomponente mit Unterstützung für den Dunkelmodus in Pastellfarben, die für Nachrichten-/Journalismus-Websites geeignet ist. Es sorgt mit seiner dunklen Benutzeroberfläche für eine reduzierte Belastung der Augen.

Offen

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