Komponenten Formt Komponente "Material Design-Formulare"

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.

Vorschau

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

Komponente "Formulare"

Eine einfache, minimalistische Formularkomponente, die nach den Prinzipien der schweizerischen/internationalen Typografie gestaltet wurde und ein gedämpftes Farbschema verwendet, das für Dokumentations- oder Wiki-Seiten geeignet ist. Es ist vollständig responsiv und unterstützt den Dunkelmodus.

Offen

Komponente "Brutalistische Formen"

Eine einfache Formularkomponente im brutalistischen Stil für Social Media. Es verfügt über ein kontrastreiches, rohes Design mit Graustufenfarben und reagiert mit Unterstützung des Dunkelmodus.

Offen

Komponente "Formulare"

Eine komplexe, reaktionsschnelle Formularkomponente mit mehrfarbigen Verlaufshintergründen und fließenden Übergängen, die sich für Technologie-/SaaS-Anwendungen eignet. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen