Formulario de inicio de sesión brutalista
Un formulario de inicio de sesión complejo y receptivo diseñado en un estilo brutalista con tonos tierra, adaptado a aplicaciones de comercio electrónico, con soporte para modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
</div>
<div class="mb-4">
<label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
</div>
<div class="flex justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2 leading-tight">
<label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
</div>
<a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
</div>
<button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
</div>
<div class="mt-8 text-center">
<img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</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 diseño Skeuomórfico, combinación de colores monocromática y soporte de temas oscuros, adecuado para sitios web comerciales.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión responsivo diseñado con los principios de Material Design y diseñado con Tailwind CSS. Cuenta con una combinación de colores en tonos tierra y un diseño simple adecuado para un blog o una plataforma de consumo de contenido, con soporte para temas oscuros.
Formulario de inicio de sesión Componente 37
Un componente de formulario de inicio de sesión responsivo diseñado en estilo Material Design con Tailwind CSS, compatible con el modo oscuro.