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
Komponente des Anmeldeformulars
Eine einfache Login-Formular-Komponente, die in einem brutalistischen Stil mit Erdtönen gestaltet ist, sich für Blog-/Content-Zwecke eignet und sowohl für helle als auch für dunkle Themen optimiert ist.
Skeuomorphes Anmeldeformular
Ein responsives Anmeldeformular mit Skeuomorphismus-Design, monochromatischem Farbschema und moderater Komplexität, das für Social-Media-Plattformen entwickelt wurde. Enthält Unterstützung für den Dunkelmodus mit Tailwind CSS.
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.