Formulario de inicio de sesión Componente 37
Un componente de formulario de inicio de sesión responsivo diseñado en estilo Material Design con Tailwind CSS, compatible con el modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
</div>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
<div class="flex justify-center mt-2">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
</div>
</div>
</div>
</div>Componentes relacionados
Formulario de inicio de sesión brutalista
Un formulario de inicio de sesión complejo y receptivo diseñado en un estilo brutalista con tonos tierra, adaptado a aplicaciones de comercio electrónico, con soporte para modo oscuro.
Componente de formulario de inicio de sesión 3D
Un formulario de inicio de sesión responsivo con un diseño 3D, combinación de colores triádica y compatibilidad con temas oscuros. Adecuado para interfaces de redes sociales.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión receptivo con soporte para modo oscuro, que usa colores pastel, adecuado para sitios web de noticias/periodismo. Garantiza una reducción de la fatiga visual con su interfaz de usuario oscura.