Authentifizierungskomponente
Authentifizierungskomponente im Neumorphism-Stil für den E-Commerce mit einem triadischen Farbschema und einfachem Layout. Unterstützt den Dunkelmodus und ist reaktionsschnell. Verwendet Tailwind CSS. Kein JavaScript.
HTML-Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="p-8 bg-white dark:bg-gray-700 rounded-xl shadow-lg dark:shadow-none">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Email</label>
<input type="email" id="email" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Password</label>
<input type="password" id="password" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<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 rounded dark:bg-gray-600 dark:border-gray-500">
</div>
<div class="ml-2 text-sm">
<label for="remember_me" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
</div>
</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>
<div class="mt-6">
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
Sign in
</button>
</div>
</form>
</div>
</div>
Verwandte Komponenten
Authentifizierungs-Komponenten
Eine reaktionsschnelle Authentifizierungskomponente, die in der Benutzeroberfläche des Dunkelmodus entwickelt wurde und Anmelde- und Anmeldeformulare mit Platzhalterbildern enthält.
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.
Komponente "Authentifizierungskomponenten"
Authentifizierungskomponente für E-Commerce mit 3D-Design, triadischem Farbschema, komplexen Interaktionen, Unterstützung für reaktionsschnelle und dunkle Modi.