Login/Signup-Komponente
Eine minimalistische Login-/Registrierungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Die Komponente bietet eine saubere und einfache Ästhetik und gewährleistet gleichzeitig die Nutzbarkeit auf verschiedenen Geräten.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Login to your account</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" placeholder="[email protected]" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Create Account</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today!</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="name" placeholder="John Doe" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email-signup">Email</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email-signup" placeholder="[email protected]" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300" for="password-signup">Password</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password-signup" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Sign Up</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
</div>
</div>
</div>Verwandte Komponenten
Minimalistisches Login-/Anmeldeformular - Mode/Schönheit
Ein minimalistisches und flaches Design-Anmeldeformular, das auf Mode-/Schönheitsmarken zugeschnitten ist, mit warmen, neutralen Farben, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus. Es bietet eine klare Ästhetik mit Fokus auf die Benutzererfahrung.
RetroVibrantCryptoAuth
Eine komplexe, retro-inspirierte Login-/Signup-Komponente mit leuchtenden Farben, die für Kryptowährungs-/Blockchain-Anwendungen entwickelt wurde und ein responsives Layout und Unterstützung für den Dunkelmodus bietet.
Login/Signup-Komponente
Eine komplexe Login/Signup-Komponente, die mit einem skeuomorphen Stil entworfen wurde und ein Graustufen-Farbschema für eine Dashboard-Oberfläche verwendet. Es enthält verschiedene interaktive Elemente und ist reaktionsschnell mit Unterstützung für dunkle Themen.