CCHub Logo CCHub Tailwind Collection
Komponenten Container Container-Komponente

Container-Komponente

Eine Container-Komponente, die im brutalistischen Stil für den E-Commerce entworfen wurde und ein responsives Layout mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS bietet.

Vorschau

HTML-Code 

<div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
    <div class="flex flex-wrap gap-4">
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <footer class="text-center mt-4 text-gray-400">
        <p>© 2023 E-commerce Store</p>
    </footer>
</div>

Verwandte Komponenten

Skeumorpher Behälter für soziale Medien

Ein skeuomorpher Social-Media-Container, der mit einem monochromatischen Schema gestaltet ist, mit weichen Schatten, subtilen Farbverläufen und abgerundeten Kanten, um reale Elemente wie Schaltflächen und Karten nachzuahmen, die sich für die Anzeige von Benutzerbeiträgen oder Profilen eignen. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Container-Komponente

Eine einfache, reaktionsschnelle Container-Komponente für den Konsum von Blogs/Inhalten mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

E-Commerce-Container-Komponente

Glassmorphism E-Commerce-Container-Komponente mit triadischem Farbschema und komplexem Layout, einschließlich Unterstützung für den Dunkelmodus

Offen