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

Karten-Komponente

Eine einfache, saubere und vertrauenswürdige Kartenkomponente, die für Unternehmens-/Geschäftsumgebungen geeignet ist und speziell für Kryptowährungs- und Blockchain-Anwendungen entwickelt wurde. Es verfügt über ein komplementäres Farbschema, responsives Design und Unterstützung für den Dunkelmodus.

Offen

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

Forum_Community_Cards_Component

Eine reaktionsschnelle und interaktive Kartenkomponente für ein Forum oder eine Community-Plattform mit einem Retro-/Vintage-Farbschema und subtilen Hover-Effekten für Mikrointeraktionen. Enthält Unterstützung für den Dunkelmodus und semantisches HTML.

Offen