Componente Forme 3D
Un componente di moduli semplice e reattivo con elementi di progettazione 3D e colori pastello per le interfacce dei social media, che supporta la modalità scura.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline">
</div>
<div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
</div>
</form>
<div class="mt-4">
<img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
</div>
</div>Componenti correlati
Componente Moduli
Un componente di moduli reattivi progettato in stile Material Design utilizzando Tailwind CSS, con layout a griglia, ombre e supporto per la modalità oscura.
Componente Forme retrò/vintage
Un componente di forme con un'estetica retrò/vintage ispirata agli anni '80 e '90, con un design reattivo e il supporto di temi scuri utilizzando Tailwind CSS.
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.