Componente de autenticación
Un componente de autenticación responsivo diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises adecuado para sitios web comerciales / corporativos.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-300 text-center">Please sign in to your account</p>
<form class="space-y-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
</div>
<button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
</form>
<p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
<div class="mt-4 text-center">
<img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
<p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
</div>
</div>
</div>Componentes relacionados
Componentes de autenticación
Un componente de autenticación responsivo que admite el modo oscuro, que utiliza CSS de Tailwind con fondos oscuros, un formulario de inicio de sesión y registro, e imágenes de marcador de posición aleatorias para los elementos de la interfaz de usuario.
Componente de autenticación
Componente de autenticación de estilo neumorfismo para comercio electrónico, con un esquema de color triádico y un diseño simple. Admite el modo oscuro y responde. Utiliza Tailwind CSS. Sin JavaScript.
Componente de componentes de autenticación
Un componente de autenticación diseñado por Neumorphic para comercio electrónico con colores vibrantes, compatibilidad con temas oscuros y diseño receptivo.