Formulario de inicio de sesión skeuomórfico
Un componente de formulario de inicio de sesión esqueuomórfico con un esquema de color en escala de grises y complejidad compleja, diseñado para un sitio web de portafolio. Es responsivo y admite temas oscuros.
Código HTML
<div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
<div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
</div>
<button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
Login
</button>
</form>
<p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
</p>
</div>
</div>
Componentes relacionados
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.
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.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión simple diseñado en un estilo brutalista con tonos tierra, adecuado para fines de blog / contenido y optimizado para temas claros y oscuros.