Formulario de inicio de sesión skeuomórfico
Un formulario de inicio de sesión responsivo con diseño de skeuomorfismo, combinación de colores monocromática y complejidad moderada, diseñado para plataformas de redes sociales. Incluye soporte para el modo oscuro usando Tailwind CSS.
Código HTML
<form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
<div class="mb-6">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
Forgot Password?
</a>
</div>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
<div class="flex justify-center gap-4 mt-2">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-google text-xl"></i>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-facebook text-xl"></i>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</button>
</div>
</div>
</form>Componentes relacionados
Playful_Sports_Login_Form
Un componente de formulario de inicio de sesión lúdico y alegre con elementos redondeados y colores en tonos tierra, diseñado para aplicaciones deportivas y de fitness. Es totalmente sensible y es compatible con el modo oscuro.
Formulario de inicio de sesión de neumorfismo
Un componente de formulario de inicio de sesión de estilo Neumorphism para un tablero, con un diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
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.