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
Formulario de inicio de sesión minimalista
Un formulario de inicio de sesión minimalista para sitios de comercio electrónico, con soporte para diseño responsivo y modo oscuro. Utiliza un esquema de color análogo. Sin JavaScript.
Componente de formulario de inicio de sesión 3D
Un formulario de inicio de sesión responsivo con un diseño 3D, combinación de colores triádica y compatibilidad con temas oscuros. Adecuado para interfaces de redes sociales.
Formulario de inicio de sesión skeuomórfico
Un sencillo formulario de inicio de sesión skeuomórfico con colores triádicos para un propósito de tablero, con un diseño receptivo y soporte para el modo oscuro mediante Tailwind CSS.