Komponente "Formulare"
Eine komplexe Material Design-Formularkomponente mit einem triadischen Farbschema für ein Dashboard. Es ist reaktionsschnell und unterstützt den Dunkelmodus.
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>Verwandte Komponenten
Social-Media-Formularkomponente mit 3D-Design und lebendigen Farben
Eine komplexe, reaktionsschnelle und lebendige 3D-inspirierte Social-Media-Formularkomponente mit Unterstützung für dunkle Themen.
Minimalistische Juwelenfarbe Regierungsform
Eine reaktionsschnelle, minimalistische Formularkomponente für Websites von Behörden oder öffentlichen Diensten mit Juwelentönen und Unterstützung für den Dunkelmodus. Es enthält Felder für persönliche Informationen, Kontaktdaten und eine Nachricht.
Komponente "Formulare"
Eine komplexe, responsive Formularkomponente mit Dark-Theme-Unterstützung für Blog-/Content-Websites, die in einem minimalistischen/flachen Stil mit einem analogen Farbschema gestaltet ist.