Composante des formes brutalistes
Un simple composant de formes de style brutaliste pour les médias sociaux. Il présente un design brut à contraste élevé utilisant des couleurs en niveaux de gris et est réactif avec la prise en charge du mode sombre.
HTML Code
<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
<form>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
<input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded">
</div>
<button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
</form>
</div>Composants associés
Composant Formulaires
Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode sombre.
Composant Formes neumorphes
Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.
Composant Formulaires de conception matérielle
Un composant de formulaires réactifs conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec prise en charge du mode sombre.