AuthComponent
Un componente de autenticación skeuomórfico diseñado con Tailwind CSS que presenta efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 font-semibold 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-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="password" type="password" placeholder="********">
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400">
<label class="ml-2 block text-gray-700 dark:text-gray-300">Remember Me</label>
</div>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
</div>
<div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
</div>
<div class="mt-6 text-center border-t pt-4">
<p class="text-gray-600 dark:text-gray-400 text-sm">or login with</p>
<div class="flex justify-center mt-2">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/200" alt="Random user avatar">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/201" alt="Random user avatar">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/202" alt="Random user avatar">
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de autenticación
Un componente de autenticación responsivo que admite el modo oscuro, que utiliza CSS de Tailwind con fondos oscuros, un formulario de inicio de sesión y registro, e imágenes de marcador de posición aleatorias para los elementos de la interfaz de usuario.
Componente de componentes de autenticación
Componente de autenticación para comercio electrónico con diseño 3D, combinación de colores triádica, interacciones complejas, soporte de modo responsivo y oscuro.
Authentication_Components_Component
Un componente de autenticación simple y receptivo para redes sociales con microinteracciones, combinación de colores complementaria y soporte de temas oscuros mediante Tailwind CSS.