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

Glassmorphism Forms Komponente

Glassmorphism Forms Component mit Erdtönen, responsivem Design und Unterstützung für dunkle Themen für einen Blog/eine Content-Website.

Offen

Corporate_Professional_Contact_Form

Eine saubere, professionelle und reaktionsschnelle Kontaktformular-Komponente, die mit einer Wald-/Grünpalette gestaltet ist und sich für Unternehmens- oder Portfolio-Websites eignet. Enthält Unterstützung für den Dunkelmodus und moderne Designfunktionen.

Offen

Komponente "3D-Formulare"

Eine einfache, reaktionsschnelle Formularkomponente mit 3D-Designelementen und Pastellfarben für Social-Media-Oberflächen, die den Dunkelmodus unterstützt.

Offen