CCHub Logo CCHub Tailwind Collection
Komponenten Interaktive Komponenten Komponente "Interaktive Komponenten"

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit 3D-Design, monochromatischem Farbschema und mittlerer Komplexität für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 


<div class="bg-gray-100 dark:bg-gray-800 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
      <p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
    </div>
    <div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Repeat product block for more products -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

       <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Interaktive Komponenten"

Eine komplexe E-Commerce-Produktkarte mit 3D-Designelementen in einem triadischen Farbschema, das für interaktive Online-Shopping-Erlebnisse mit Responsive- und Dark-Mode-Unterstützung entwickelt wurde.

Offen

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit minimalistischem/flachem Design, Farbschema in Erdtönen und komplexer Komplexität für einen Dashboard-Zweck, implementiert mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Komponente "Interaktive Komponenten"

Eine minimalistische, lebendige und einfache interaktive Komponente, die für Unterhaltungs- und Medienplattformen entwickelt wurde und über Wiedergabe-/Pausensteuerungen, einen Fortschrittsbalken und eine Lautstärkeregelung für Lautsprecher verfügt. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen