CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine responsive Spaltenkomponente, die mit Glassmorphism entwickelt wurde und ein triadisches Farbschema für eine Business-/Corporate-Website verwendet. Es verfügt über glasfaserähnliche durchscheinende Elemente, Unschärfeeffekte und ist für den Dunkelmodus geeignet.

Vorschau

HTML-Code 

<div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
        <img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
        <img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
        <img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
</div>

Verwandte Komponenten

Spalten-Komponente

Eine responsive Columns-Komponente, die im brutalistischen Stil mit Erdtönen gestaltet ist, auf den E-Commerce zugeschnitten ist und sich durch mittlere Komplexität und Unterstützung für dunkle Themen auszeichnet.

Offen

Brutalism_Portfolio_Columns_Component

Eine vom Brutalismus inspirierte mehrspaltige Portfoliokomponente mit gedämpften Farben, großer Typografie, kontrastreichen Rändern und asymmetrischen Layouts. Enthält Unterstützung für den Dunkelmodus und präsentiert Projekte mit Titeln, Beschreibungen und Bildern.

Offen

Spalten-Komponente

Responsive Columns-Komponente mit Glassmorphism-Stil, triadischem Farbschema, einfacher Komplexitätsstufe für Business-/Corporate-Zwecke, einschließlich Unterstützung des Dunkelmodus.

Offen