Formulario de inicio de sesión de comercio electrónico minimalista
Un formulario de inicio de sesión de diseño minimalista y plano con colores pastel, diseñado para sitios de comercio electrónico. Es simple, receptivo y admite el modo oscuro usando Tailwind CSS.
Código HTML
<div
class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
>
<div
class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
>
<h2
class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
>
Login
</h2>
<form>
<div class="mb-4">
<label
for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Email Address
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your email"
/>
</div>
<div class="mb-6">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
>
Login
</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
</p>
</div>
</div>
</div>Componentes relacionados
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión receptivo con soporte para modo oscuro, que usa colores pastel, adecuado para sitios web de noticias/periodismo. Garantiza una reducción de la fatiga visual con su interfaz de usuario oscura.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión simple y receptivo con colores neutros cálidos, diseño centrado en la microinteracción y soporte de modo oscuro, adecuado para sistemas de reserva y reservas.
Componente de formulario de inicio de sesión
Formulario de inicio de sesión responsivo con diseño de materiales, combinación de colores triádica y compatibilidad con modo oscuro mediante Tailwind CSS.