Modulo di accesso Brutalist
Un modulo di accesso complesso e reattivo progettato in uno stile brutalista con toni della terra, su misura per applicazioni di e-commerce, con supporto per la modalità oscura.
Codice 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>
Componenti correlati
Modulo di accesso Skeuomorphic
Un componente del modulo di accesso scheumorfico con una combinazione di colori in scala di grigi e una complessità complessa, progettato per un sito Web di portfolio. È reattivo e supporta il tema scuro.
Componente Modulo di accesso
Un componente del modulo di accesso reattivo con design Skeuomorphic, combinazione di colori monocromatici e supporto per temi scuri, adatto per siti Web aziendali.
Componente Modulo di accesso
Un semplice componente del modulo di accesso progettato in uno stile brutalista con toni della terra, adatto per blog/contenuti e ottimizzato sia per temi chiari che scuri.