Komponente "Authentifizierungskomponenten"
Eine reaktionsschnelle Authentifizierungskomponente, die für die Benutzeroberfläche im Dunkelmodus entwickelt wurde und ein Anmelde- und Anmeldeformular im Tailwind-CSS-Stil bietet.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
</div>
<div class="mt-6 border-t border-gray-600"></div>
<h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
<input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
<input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
</form>
<div class="mt-4 text-center">
<small>Or sign up using</small>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
</div>
</div>
</div>
</div>Verwandte Komponenten
Auth_Component_Dating_Neon_Artistic
Eine einfache, künstlerische Authentifizierungskomponente mit einem Neon-/Elektro-Farbschema, das für Dating-/Social-Media-Plattformen entwickelt wurde, mit einer sanften Aquarellästhetik und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
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.
Authentifizierungs-Komponenten
Eine komplexe, reaktionsschnelle Authentifizierungskomponente im Brutalismus-Design mit dunklem Thema, die für Social-Media-Anwendungen geeignet ist.