Componente Forme Brutaliste
Un componente web forms progettato con uno stile brutalista caratterizzato da un contrasto elevato e layout insoliti, adatto per l'e-commerce e reattivo con supporto per temi scuri.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
<form class="space-y-4">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
<input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
<img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
</div>
<button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
</form>
<p class="mt-4 text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
</p>
</div>Componenti correlati
Componente Moduli
Un componente di forma semplice e minimalista progettato con i principi della tipografia svizzera/internazionale, utilizzando una combinazione di colori tenui adatta per la documentazione o i siti wiki. È completamente reattivo e supporta la modalità oscura.
Brutalista Scala di Grigi Forma Industriale
Un componente di forma complesso, in stile brutalista, con una combinazione di colori in scala di grigi, progettato per applicazioni industriali e manifatturiere. Presenta elementi ad alto contrasto, layout insoliti e reattività completa con il supporto della modalità oscura.
Componente Moduli
Un componente di moduli reattivi progettato in stile minimalista, adatto per le interfacce dei social media, con colori vivaci, supporto per la modalità oscura e interazioni complesse.