Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión minimalista diseñado con un esquema de color triádico adecuado para la exhibición de portafolios con soporte para modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 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-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="email" id="email" required placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-gray-600 dark:text-gray-400 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 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="password" id="password" required placeholder="********">
</div>
<div class="flex items-center justify-between">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 dark:bg-gray-600 rounded">
<span class="ml-2 text-gray-700 dark:text-gray-200">Remember Me</span>
</label>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 text-sm">Forgot Password?</a>
</div>
<div class="mt-8">
<button class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-gray-700 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Sign Up</a></p>
</div>
</div>
</div>Componentes relacionados
Formulario de inicio de sesión brutalista
Un componente de formulario de inicio de sesión simple y de estilo brutalista diseñado para aplicaciones de tecnología/SaaS, con alto contraste, tipografía audaz y un esquema de color análogo con capacidad de respuesta total y compatibilidad con modo oscuro.
Componente de formulario de inicio de sesión
Un formulario de inicio de sesión complejo y responsivo con un diseño minimalista / plano adecuado para un blog o un sitio de contenido. Cuenta con un esquema de color monocromático, soporte para temas oscuros y múltiples elementos interactivos, implementados puramente con HTML y Tailwind CSS.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión responsivo diseñado con el estilo Glassmorphism, que incorpora efectos de vidrio esmerilado, efectos de desenfoque y soporte para el modo oscuro mediante Tailwind CSS.