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
Corporate_Banking_Login_Form
Un formulaire de connexion minimaliste et plat adapté aux applications financières et bancaires d’entreprise, avec des tons bleus professionnels, une réactivité totale et une prise en charge du mode sombre.
Composant Formulaires
Composant de formulaires réactifs avec conception 3D, schéma de couleurs analogue, mise en page simple pour le commerce électronique avec prise en charge du thème sombre
JobApplicationForm_WatercolorArtistic
Un formulaire de candidature complexe et réactif avec un style aquarelle/design artistique et une palette de couleurs arc-en-ciel dégradée. Comprend des sections pour les détails personnels, l’expérience, l’éducation et les téléchargements de fichiers, avec prise en charge du mode sombre, adaptées aux sites d’emploi et aux plateformes de carrière.