Komponenten Produktkarten Komponente "Skeuomorphe Produktkarten"

Komponente "Skeuomorphe Produktkarten"

Einfache, reaktionsschnelle Produktkartenkomponente mit einem skeuomorphen Design in Graustufen, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-900 dark:text-white tracking-tight leading-tight">
      Our Featured Products
    </h2>
    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1015/300/200" alt="Product Image 1">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Advanced Gadget Pro
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Immerse yourself in unparalleled performance with our latest innovation. Designed for the future. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$299.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1016/300/200" alt="Product Image 2">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Elite Sound System
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Experience crystal-clear audio with our state-of-the-art sound system. Perfect for audiophiles. Consectetur adipiscing elit. Faucibus amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$499.50</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1018/300/200" alt="Product Image 3">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Smart Home Hub
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Control your home with ease using our intuitive smart hub. Integration made simple. Dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$175.00</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1/300/200" alt="Product Image 4">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Portable Power Bank
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Never run out of power on the go with our high-capacity power bank. Reliability in your pocket. Lorem ipsum dolor sit amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$49.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Custom styles for skeuomorphic shadows might require a simple Tailwind config extension -->
  <style>
    .shadow-neu {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neu-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #282828;
    }
    .active\:shadow-inner-neu {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .active\:shadow-inner-neu-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #282828;
    }
    .shadow-inner-sm {
      box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1), inset -1px -1px 2px rgba(255,255,255,0.7);
    }
  </style>
  <!-- Note: For production, consider extending theme.boxShadow in tailwind.config.js for these custom shadows. -->
</div>

Verwandte Komponenten

Komponente "Produktkarten"

Eine Produktkartenkomponente im brutalistischen Stil mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für dunkle Themen, die für ein Dashboard geeignet ist. Das Design enthält Platzhalter für Bilder und Produktdetails.

Offen

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente, die nach den Prinzipien des Material Designs mit Tailwind CSS entwickelt wurde. Es unterstützt den Dunkelmodus und bietet Schatten und rasterbasierte Layouts.

Offen