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

Luxury_Sepia_SaaS_Cards_Component

Eine komplexe, reaktionsschnelle Kartenkomponente mit einem Luxus-/Premium-Designstil, einem sepiafarbenen/braunen Farbschema, optimiert für Technologie-/SaaS-Anwendungen, einschließlich Unterstützung des Dunkelmodus und interaktiver Elemente.

Offen

Music_Cards_Component

Eine reaktionsschnelle Musik-/Audiokartenkomponente mit satten juwelenfarbenen Farbverläufen und sanften Übergängen mit Unterstützung für den Dunkelmodus. Einfaches Layout für die Anzeige von Alben oder Titeln.

Offen

Retro_E_commerce_Cards_Component

Eine reaktionsschnelle E-Commerce-Produktkartenkomponente mit Retro-/Vintage-Ästhetik, Erdtönen und Unterstützung für den Dunkelmodus, die sich für Online-Shopping-Erlebnisse eignet. Zu den Funktionen gehören das Produktbild, der Name, der Preis und ein Call-to-Action-Button.

Offen