Composant Formulaires
Composant de formulaire de conception matérielle complexe avec une palette de couleurs triadique pour un tableau de bord. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Settings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label for="username" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Username</label>
<input type="text" id="username" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="john.doe">
</div>
<div>
<label for="email" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
</div>
<div>
<label for="password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
</div>
<div>
<label for="confirm-password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Confirm Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
</div>
<div class="md:col-span-2">
<label for="bio" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Bio</label>
<textarea id="bio" rows="4" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="Tell us about yourself..."></textarea>
</div>
<div class="md:col-span-2">
<label class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Notification Settings</label>
<div class="flex items-center mb-4">
<input type="checkbox" id="email-notifications" class="mr-2">
<label for="email-notifications" class="text-gray-700 dark:text-gray-200">Receive email notifications</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="push-notifications" class="mr-2">
<label for="push-notifications" class="text-gray-700 dark:text-gray-200">Receive push notifications</label>
</div>
</div>
</div>
<div class="flex justify-end mt-8">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-4">Cancel</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Save Settings</button>
</div>
</div>
</div>Composants associés
Composant Formulaires
Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.
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 3D
Un composant de formulaires simple et réactif avec des éléments de conception 3D et des couleurs pastel pour les interfaces de médias sociaux, prenant en charge le mode sombre.