CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine Spaltenkomponente, die im Glassmorphism-Stil, lebendigen Farben und einem einfachen Layout entworfen wurde und für ein Dashboard geeignet ist.

Vorschau

HTML-Code 

<div class="flex flex-col md:flex-row md:space-x-4 p-6 bg-gray-900 dark:bg-gray-800 rounded-lg backdrop-blur-lg border border-transparent border-gray-600">
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 1</h2>
        <img src="https://picsum.photos/200/100" alt="Image 1" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the first column. Use this space to display key metrics or important information.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 2</h2>
        <img src="https://picsum.photos/200/100" alt="Image 2" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the second column. Provide insights, visualizations, or controls related to the data here.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 3</h2>
        <img src="https://picsum.photos/200/100" alt="Image 3" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the third column. Summary or additional data visuals can fit nicely in this space.</p>
    </div>
</div>

Verwandte Komponenten

Spalten-Komponente

Eine responsive Spaltenkomponente, die nach Material Design-Prinzipien entwickelt wurde und Tailwind CSS für das Styling, die Unterstützung dunkler Designs und reaktionsschnelle Animationen verwendet.

Offen

Spalten-Komponente

Eine reaktionsschnelle Spaltenkomponente mit Retro-/Vintage-Ästhetik, die sowohl helle als auch dunkle Themen unterstützt. Enthält Platzhalterbilder und Avatare von picsum.photos bzw. randomuser.me.

Offen

Luxury_Dating_Columns_Component

Eine einfache, elegante dreispaltige Layoutkomponente für Dating-/Social-Media-Plattformen mit einer luxuriösen Ästhetik mit einer Schwarz-Weiß- und Akzentfarbpalette, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen