Componentes de autenticación
Un componente de inicio de sesión y registro receptivo e interactivo diseñado con microinteracciones, utilizando colores complementarios para una interfaz de contenido de blog con soporte para temas oscuros.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2 leading-tight">
<label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
</div>
<button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
</form>
<div class="mt-6 text-center">
<span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
</div>
</div>
</div>Componentes relacionados
Componentes de autenticación Retro Vintage
Un componente de autenticación responsivo complejo con un diseño retro/vintage, adecuado para un panel de control y visualización de datos. Cuenta con colores triádicos y elementos interactivos.
Componente de autenticación
Componente de autenticación de estilo neumorfismo para comercio electrónico, con un esquema de color triádico y un diseño simple. Admite el modo oscuro y responde. Utiliza Tailwind CSS. Sin JavaScript.
Componentes de autenticación
Un componente de autenticación simple para sitios web comerciales y corporativos que utiliza Material Design y un esquema de color complementario con Tailwind CSS.