Componente Material Design Forms
Un componente di moduli reattivi progettato con i principi di Material Design utilizzando Tailwind CSS, con supporto per la modalità oscura.
Codice HTML
<div class="container mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300">Avatar</label>
<img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
</form>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1E1E2F;
}
}
</style>Componenti correlati
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 Moduli
Un componente complesso del modulo Material Design con una combinazione di colori triadica per un cruscotto. È reattivo e supporta la modalità oscura.
Componente modulo per social media con design 3D e colori vivaci
Un componente di modulo per social media complesso, reattivo e vibrante ispirato al 3D con supporto per temi scuri.