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
MaterialEarthToneLoginSignupComponent
Eine reaktionsschnelle Anmelde- und Registrierungskomponente im Material Design-Stil mit erdfarbenem Farbschema, moderater Komplexität mit interaktivem Umschalten zwischen Formularen, entwickelt für Dashboards mit Unterstützung des Dunkelmodus.
Retro Dashboard Anmeldung/Anmeldung
Eine Login- und Registrierungskomponente im Retro-/Vintage-Stil für ein Dashboard mit einem komplexen Layout und einem triadischen Farbschema. Enthält Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Login/Signup-Komponente
Eine reaktionsschnelle Login-/Signup-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde.