CCHub Logo CCHub Tailwind Collection
Komponenten Karten Karten-Komponente

Karten-Komponente

Responsive Kartenkomponente mit Mikrointeraktionen und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Material Design Karte

Eine Kartenkomponente im Material Design-Stil mit reaktionsschnellem Verhalten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über visuelle Hinweise auf Höhen- und Welleneffekte.

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

Komponente "Glassmorphism-Karten"

Glassmorphism Cards Komponente mit leuchtenden Farben. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen