Componente de inicio de sesión/registro
Un componente minimalista de inicio de sesión y registro que utiliza Tailwind CSS, que admite efectos responsivos y tema oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
</form>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
<input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
<input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
</form>
</div>
<div class="hidden">
<img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
<img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
</div>
</div>Componentes relacionados
Componente de inicio de sesión/registro de Cyberpunk Sepia
Un componente de inicio de sesión/registro complejo y receptivo con una estética de neón inspirada en el cyberpunk que utiliza tonos sepia/marrones, adecuado para un foro o una plataforma comunitaria. Incluye soporte para modo oscuro y elementos interactivos.
MaterialEarthToneLoginSignupComponent
Un componente de inicio de sesión y registro de estilo Material Design receptivo con combinación de colores en tonos tierra, complejidad moderada con alternancia interactiva entre formularios, diseñado para paneles con soporte para modo oscuro.
Brutalismo Componente de inicio de sesión/registro
Un componente de inicio de sesión/registro de estilo brutalista con una combinación de colores triádica, complejidad media, diseño receptivo y compatibilidad con el modo oscuro. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.