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

Komponente "Brutalistische Formen"

Eine Webformular-Komponente, die in einem brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts gestaltet wurde, für E-Commerce geeignet und reaktionsschnell mit Unterstützung für dunkle Themen ist.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
    <form class="space-y-4">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
            <img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
        </div>
        <button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
    </form>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
    </p>
</div>

Verwandte Komponenten

Retro-Vintage-Formularkomponente

Eine komplexe Formularkomponente im Retro-/Vintage-Stil mit pastellfarbenem Farbschema, die für professionelle Business-Websites geeignet ist und mit Unterstützung für den Dunkelmodus reaktionsschnell ist.

Offen

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

Komponente "3D-Formulare"

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

Offen