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

JobApplicationForm_WatercolorArtistic

Ein komplexes, responsives Bewerbungsformular mit einem Aquarell-/künstlerischen Designstil und einem Regenbogen-Farbschema mit Farbverlauf. Enthält Abschnitte für persönliche Daten, Erfahrung, Ausbildung und Datei-Uploads mit Unterstützung für den Dunkelmodus, geeignet für Jobbörsen und Karriereplattformen.

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

Minimalistische Formularkomponente

Eine minimalistische Formularkomponente, die auf Portfolios zugeschnitten ist, mit einem pastellfarbenen Farbschema, einfachem Layout, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen