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 "Komponenten für die Inhaltsanzeige"

Eine Content Display Component mit Mikrointeraktionen, Graustufenfarben und moderater Komplexität, die für Portfolios mit responsiver Unterstützung für dunkle Themen entwickelt wurde.

Offen

Komponente "Komponenten für die Inhaltsanzeige"

Glassmorphism Content Display Komponente mit Erdtönen

Offen

Komponente "Inhaltsanzeige"

Eine Content-Display-Komponente mit Glassmorphism-Design mit responsivem Layout und Unterstützung für dunkle Themen.

Offen