Modulo di registrazione per il brutalismo
Componente del modulo di registrazione con design brutalista, combinazione di colori triadica e complessità semplice, adatto per un cruscotto. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm border-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-center text-black dark:text-white mb-8 font-mono">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Username</label>
<input type="text" id="username" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Email</label>
<input type="email" id="email" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Password</label>
<input type="password" id="password" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="button"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white font-mono
dark:bg-blue-700 dark:hover:bg-blue-900">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500 font-mono" href="#">
Forgot Password?
</a>
</div>
</form>
</div>
</div>Componenti correlati
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supporta la modalità oscura e la visualizzazione di immagini segnaposto.
Componente del modulo di registrazione
Un modulo di registrazione reattivo con design del neumorfismo, combinazione di colori analoga e supporto per la modalità oscura, costruito con Tailwind CSS per scopi di social media.
Componente del modulo di registrazione
Un componente del modulo di registrazione con design del neumorfismo, combinazione di colori in scala di grigi, complessità moderata e supporto del tema scuro reattivo utilizzando Tailwind CSS.