Componente de inicio de sesión/registro
Un componente complejo de inicio de sesión/registro diseñado con un estilo esqueuomórfico, que utiliza un esquema de color en escala de grises para una interfaz de panel. Incluye varios elementos interactivos y es responsivo con soporte para temas oscuros.
Código HTML
<div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" class="mr-2 leading-tight" id="remember">
<label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
</div>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
</div>
<div class="flex flex-col">
<button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
<button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
</div>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
<div class="flex justify-center space-x-4 mt-2">
<img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
<img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
<img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
</div>
</div>
</div>
</div>Componentes relacionados
Componente de inicio de sesión/registro
Un componente minimalista de inicio de sesión/registro diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros. El componente proporciona una estética limpia y simple al tiempo que garantiza la usabilidad en varios dispositivos.
Componente de inicio de sesión/registro
Un componente complejo de inicio de sesión/registro que utiliza principios de Material Design y un esquema de color monocromático para sitios web comerciales y corporativos con soporte de temas oscuros.
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.