Komponente "Authentifizierungskomponenten"
Eine im Brutalismus gestaltete Webkomponente für Authentifizierungsschnittstellen in sozialen Medien mit einem pastellfarbenen Farbschema und hohem Kontrast für den Dunkelmodus.
HTML-Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
</div>
</div>
<button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
</form>
<div class="text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
</div>
<div class="flex justify-between items-center">
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
<span class="text-gray-600 dark:text-gray-300">or</span>
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex justify-center space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
</a>
</div>
</div>
</div>Verwandte Komponenten
MinimalistAuthForm
Eine reaktionsschnelle, minimalistische Login-Formular-Komponente, die für Portfolios oder Webanwendungen entwickelt wurde. Es zeichnet sich durch eine flache Designästhetik mit einem komplementären Farbschema aus: Blau wird für interaktive Elemente im hellen Modus und Orange im dunklen Modus verwendet. Das Formular enthält Felder für E-Mail und Passwort, eine Option "Remember Me", einen Link "Passwort vergessen", eine Option zur Anmeldung und die Integration von Social Logins (z. B. GitHub). Es unterstützt ein dunkles Design und ist für eine einfache Integration ausschließlich mit HTML und Tailwind CSS erstellt.
Authentifizierungs-Komponenten
Eine reaktionsschnelle Authentifizierungskomponente mit Unterstützung für den Dunkelmodus, Verwendung von Tailwind CSS mit dunklem Hintergrund, einem Anmelde- und Registrierungsformular und zufälligen Platzhalterbildern für UI-Elemente.
Retro Vintage Authentifizierungskomponenten
Eine komplexe, reaktionsschnelle Authentifizierungskomponente im Retro-/Vintage-Design, die sich für ein Datenvisualisierungs- und Steuerungs-Dashboard eignet. Es zeichnet sich durch triadische Farben und interaktive Elemente aus.