CCHub Logo CCHub Tailwind Collection
Komponenten Formt Komponente "Brutalistische Formen"

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>

Verwandte Komponenten

Komponente "Formulare"

Eine reaktionsschnelle Formularkomponente im minimalistischen Stil, die für Social-Media-Schnittstellen geeignet ist und lebendige Farben, Unterstützung für den Dunkelmodus und komplexe Interaktionen bietet.

Offen

Brutalistische Graustufen-Industrieform

Ein komplexes, brutalistisch anmutendes Formbauteil mit Graustufen-Farbschema, das für Industrie- und Fertigungsanwendungen entwickelt wurde. Verfügt über kontrastreiche Elemente, ungewöhnliche Layouts und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Organisches/von der Natur inspiriertes Gesundheitsformular

Eine einfache, reaktionsschnelle Formularkomponente mit einem natürlichen, fließenden Design, einem blauen Farbschema und Unterstützung des Dunkelmodus, die sich für das Gesundheitswesen und medizinische Anwendungen eignet.

Offen