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

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.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
    <form>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
        <div class="flex items-center mb-4">
            <img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
            <input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded"> 
        </div>
        
        <button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
    </form>
</div>

Verwandte Komponenten

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.

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

Komponente "Formulare"

Eine komplexe, reaktionsschnelle, Dark-Theme-fähige Formularkomponente für Social-Media-Schnittstellen mit monochromatischem 3D-Design. Verwendet Tailwind CSS mit dark:-Präfixen für den dunklen Modus und enthält Beispielformularelemente.

Offen