Componente de formulario de inicio de sesión
Un formulario de inicio de sesión simple y receptivo diseñado con un estilo esqueuomórfico que imita elementos del mundo real utilizando una combinación de colores vibrantes. Es adecuado para interfaces de redes sociales y admite el modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2> <div class="mt-6"> <div class="mb-4"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label> <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/> </div> <div class="mb-6"> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/> </div> <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button> </div> <div class="mt-4 text-center"> <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/> </div> <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a> </div> </div> </div>Componentes relacionados
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos responsivos, que admite temas oscuros con Tailwind CSS.
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.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión minimalista diseñado con un esquema de color triádico adecuado para la exhibición de portafolios con soporte para modo oscuro.