Login/Signup-Komponente
Eine komplexe Login-/Registrierungskomponente unter Verwendung von Material Design-Prinzipien und einem monochromen Farbschema für Geschäfts- und Unternehmenswebsites mit Unterstützung für dunkle Themen.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
<div class="flex flex-col space-y-4">
<!-- Login Form -->
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
<input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
<input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
</form>
<!-- Separator -->
<div class="flex items-center justify-center space-x-2">
<div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
<span class="text-gray-500 dark:text-gray-400">OR</span>
<div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
</div>
<!-- Signup Form -->
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
<input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
<input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
<input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
</form>
<!-- Avatar Image -->
<div class="flex justify-center mt-6">
<img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500">
</div>
</div>
</div>
</div>Verwandte Komponenten
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.
Login/Signup-Komponente
Eine reaktionsschnelle Login-/Signup-Komponente, die in einem skeuomorphen Stil mit Tailwind CSS gestaltet wurde, mit Unterstützung für dunkle Themen.