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 Forme Neumorfiche
Un componente di forme semplici con design a neumorfismo, su misura per applicazioni di e-commerce, caratterizzato da una combinazione di colori monocromatica e supporto per la modalità scura.
Componente Moduli
Un componente di moduli complesso, reattivo e abilitato al tema scuro per interfacce di social media con un design monocromatico 3D. Utilizza il CSS Tailwind con i prefissi dark: per la modalità scura e include elementi di modulo di esempio.
Componente Forme Brutaliste
Un componente di forme progettato con un'estetica brutalista, utilizzando colori pastello e adatto per siti Web aziendali/aziendali. Presenta un design reattivo con supporto per temi scuri.