CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Funktionale Komponenten Komponente - Brutalismus Stil

Funktionale Komponenten Komponente - Brutalismus Stil

Eine funktionale Webkomponente, die in einem brutalistischen Stil mit Tailwind CSS gestaltet wurde. Die Komponente zeichnet sich durch ein fettes Layout mit hohem Kontrast, reaktionsschnellen Effekten und Unterstützung für dunkle Designs aus. Es enthält Platzhalterbilder und Avatare für eine visuelle Attraktivität.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine Webkomponente, die reale Gegenstücke im Business-Corporate-Stil mit einem komplementären Farbschema, einem einfachen Layout und einem responsiven Design mit Unterstützung des Dunkelmodus nachahmt.

Offen

Neon_Glow_Marketplace_Component

Eine komplexe Marktplatzkomponente mit hellen, leuchtenden Elementen und einem triadischen Farbschema, das für Multi-Vendor-Plattformen entwickelt wurde. Zu den Funktionen gehören Produktkarten, Kategorien, Such- und Benutzerprofile, die alle reaktionsschnell sind und den Dunkelmodus unterstützen.

Offen

Komponente "Funktionale Komponenten"

Eine minimalistische Portfolio-Komponente, die mit Tailwind CSS entworfen wurde, ein lebendiges Farbschema aufweist und den Dunkelmodus unterstützt. Diese Komponente ist für die Präsentation von Arbeiten oder Produkten vorgesehen und enthält Bilder und Avatar-Platzhalter.

Offen