CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Komponente "Inhaltsanzeige"

Komponente "Inhaltsanzeige"

Eine Content-Display-Komponente, die in einem skeuomorphen Stil für den E-Commerce mit einem dunklen Thema entworfen wurde. Es präsentiert Produkte mit minimalen Elementen und verwendet ein analoges Farbschema für eine ansprechende Ästhetik.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Inhaltsanzeige"

Eine reaktionsschnelle Inhaltsanzeigekomponente im Glassmorphism-Stil mit verschwommenem Hintergrund und durchscheinenden Elementen mit Unterstützung für den Dunkelmodus.

Offen

Komponenten für die Inhaltsanzeige

Eine einfache responsive Content-Display-Komponente im Vintage-Stil für den E-Commerce, die ein monochromatisches Farbschema verwendet und den Dunkelmodus unterstützt.

Offen

Komponente "Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten mit einem minimalistischen und flachen Designstil, ideal für Blogs und den Konsum von Inhalten. Es hat ein Graustufen-Farbschema und ist mit interaktiven Elementen ausgestattet, während es den Dunkelmodus unterstützt.

Offen