Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión responsivo diseñado con los principios de Material Design y diseñado con Tailwind CSS. Cuenta con una combinación de colores en tonos tierra y un diseño simple adecuado para un blog o una plataforma de consumo de contenido, con soporte para temas oscuros.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" 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 dark:border-gray-600" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" 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 dark:border-gray-600" placeholder="••••••••" required>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
</p>
</div>
</div>Componentes relacionados
Componente de formulario de inicio de sesión - Modo oscuro vibrante
Un componente de formulario de inicio de sesión complejo y receptivo diseñado para uso comercial/corporativo con una combinación de colores vibrantes y soporte completo para el modo oscuro, con el objetivo de reducir la fatiga visual.
Formulario de inicio de sesión de neumorfismo
Un componente de formulario de inicio de sesión diseñado con el estilo Neumorphism, con diseño responsivo y soporte de temas oscuros mediante Tailwind CSS.
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.