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
Componente de formulario de inicio de sesión
Componente de formulario de inicio de sesión con diseño 3D, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Formulario de inicio de sesión de comercio electrónico minimalista
Un formulario de inicio de sesión de diseño minimalista y plano con colores pastel, diseñado para sitios de comercio electrónico. Es simple, receptivo y admite el modo oscuro usando Tailwind CSS.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión complejo y receptivo con microinteracciones y un esquema de color análogo, adecuado para sitios web comerciales / corporativos. Es compatible con el modo oscuro y utiliza Tailwind CSS para el estilo.