Componente de formulario de inicio de sesión
Formulario de inicio de sesión responsivo con diseño de materiales, combinación de colores triádica y compatibilidad con modo oscuro mediante Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
</div>
</div>
</div>
</div>
Componentes relacionados
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.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos responsivos, que admite temas oscuros con Tailwind CSS.
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.