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

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.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" 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 class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente des Anmeldeformulars

Eine mit Glassmorphism entworfene Login-Formularkomponente mit mattglasähnlichen durchscheinenden Elementen und responsiven Effekten, die dunkle Themen mit Tailwind CSS unterstützen.

Offen

Komponente des Anmeldeformulars

Responsives Anmeldeformular mit Materialdesign, triadischem Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Skeuomorphes Anmeldeformular

Ein einfaches Skeuomorphes Anmeldeformular mit triadischen Farben für Dashboard-Zwecke, mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen