CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine responsive Spaltenkomponente, die mit Tailwind CSS für den Dunkelmodus gestaltet wurde und Avatar- und Bildplatzhalter enthält.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-6">
    <h2 class="text-2xl font-bold mb-4">Columns Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Column 1 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User One</span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
        </div>
        <!-- Column 2 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Two</span>
            </div>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <!-- Column 3 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Three</span>
            </div>
            <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
        </div>
    </div>
</div>

Verwandte Komponenten

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.

Offen

Spalten-Komponente

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

Offen

Spalten-Komponente

Eine responsive Columns-Komponente, die für Blogs oder die Nutzung von Inhalten entwickelt wurde. Es verfügt über ein minimalistisches, flaches Design mit einem analogen Farbschema und Unterstützung für dunkle Themen.

Offen