Komponente "Material Design-Formulare"
Eine responsive Formularkomponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde und Unterstützung für den Dunkelmodus bietet.
HTML-Code
<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>
Verwandte Komponenten
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 "Brutalistische Formen"
Eine Formularkomponente, die mit einer brutalistischen Ästhetik gestaltet wurde, Pastellfarben verwendet und für Geschäfts-/Unternehmenswebsites geeignet ist. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen.
Komponente "Formulare"
Eine responsive Formularkomponente, die im Material Design-Stil mit Tailwind CSS entworfen wurde und Rasterlayouts, Schatten und Unterstützung für den Dunkelmodus bietet.