CCHub Logo CCHub Tailwind Collection
Komponenten Karten Komponente "Skeuomorphe Karten"

Komponente "Skeuomorphe Karten"

Eine einfache Kartenkomponente, die in einem skeuomorphen Stil gestaltet ist und ein analoges Farbschema für das Lesen und den Konsum von Inhalten verwendet. Diese Komponente ist reaktionsschnell und unterstützt dunkles Design.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

3D-Karten-Komponente

Eine reaktionsschnelle Kartenkomponente mit einem 3D-Designstil, lebendigen Farben und mehreren interaktiven Elementen, die sich für ein Dashboard eignet. Es unterstützt den Dunkelmodus mit dem dunklen Präfix von Tailwind.

Offen

Karten-Komponente

Eine reaktionsschnelle Portfoliokartenkomponente mit einem brutalistischen Designstil, der ein pastellfarbenes Farbschema und moderate Komplexität mit interaktiven Funktionen verwendet. Diese Karte präsentiert Arbeiten oder Produkte und unterstützt den Dunkelmodus.

Offen

Karten-Komponente

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

Offen