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.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
Componentes relacionados
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión diseñado en 3D con un esquema de color triádico, adecuado para el comercio electrónico, con soporte y capacidad de respuesta para temas oscuros, construido con Tailwind CSS.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión simple y receptivo con estética cyberpunk y acentos de neón pastel, diseñado para marcas de moda / belleza. Incluye soporte para 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.