CCHub Logo CCHub Tailwind Collection
Komponenten Karten Karten-Komponente

Karten-Komponente

Eine komplexe Kartenkomponente, die für den Dunkelmodus entwickelt wurde und sich für den Konsum von Blogs und Inhalten mit einem triadischen Farbschema eignet.

Vorschau

HTML-Code 

<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 1, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
    <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
    <div class="flex justify-between items-center">
        <span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 2, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
    <p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
    <div class="flex justify-between items-center">
        <span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>

Verwandte Komponenten

Brutalistische Kartenkomponente

Eine brutalistische Kartenkomponente mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Skeuomorphe Karten"

Inspiriert vom Skeuomorphismus ist die folgende Kartenkomponente vollständig responsiv und unterstützt dunkle Themen. Für den Dunkelmodus ist CSS-Unterstützung ausreichend. Es wird kein JavaScript benötigt.

Offen

E-Commerce-Karte

Responsive E-Commerce-Kartenkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS und Material Design-Prinzipien. Verfügt über ein lebendiges Farbschema mit moderater Komplexität, einschließlich interaktiver Elemente wie Schaltflächen und Hover-Effekte. Verwendet ein rasterbasiertes Layout und enthält Schatten für mehr Tiefe.

Offen