Komponente des Anmeldeformulars
Responsives Anmeldeformular mit Materialdesign, triadischem Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
</div>
</div>
</div>
</div>
Verwandte Komponenten
Login-Formular-Komponente 37
Eine responsive Anmeldeformularkomponente, die im Material Design-Stil mit Tailwind CSS entworfen wurde und den Dunkelmodus unterstützt.
Playful_Sports_Login_Form
Eine verspielte und fröhliche Login-Formularkomponente mit abgerundeten Elementen und erdfarbenen Farben, die für Sport- und Fitnessanwendungen entwickelt wurde. Es reagiert vollständig und unterstützt den Dunkelmodus.
Komponente des Anmeldeformulars
Eine responsive Anmeldeformularkomponente mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.