Komponente "Produktgalerie"
Eine komplexe, reaktionsschnelle Produktgalerie-Komponente, die mit subtilen Mikrointeraktionen, pastellfarbenem Farbschema und vollständiger Unterstützung des Dunkelmodus entwickelt wurde und sich für ein Forum oder eine Community-Plattform eignet. Mit interaktiver Bildauswahl und detaillierten Produktinformationen.
HTML-Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 p-4 sm:p-6 lg:p-8">
<!-- Image Gallery Section -->
<div class="flex flex-col-reverse lg:flex-row gap-4">
<!-- Thumbnail Navigation -->
<div class="flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pb-2 lg:pb-0 scrollbar-hide">
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-indigo-200 dark:border-indigo-600 ring-2 ring-indigo-300 dark:ring-indigo-500 cursor-pointer transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md">
<img src="https://picsum.photos/id/1018/200/200" alt="Product thumbnail 1" class="w-full h-full object-cover">
</div>
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
<img src="https://picsum.photos/id/1025/200/200" alt="Product thumbnail 2" class="w-full h-full object-cover">
</div>
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
<img src="https://picsum.photos/id/1080/200/200" alt="Product thumbnail 3" class="w-full h-full object-cover">
</div>
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
<img src="https://picsum.photos/id/1043/200/200" alt="Product thumbnail 4" class="w-full h-full object-cover">
</div>
</div>
<!-- Main Image -->
<div class="flex-1 rounded-xl overflow-hidden shadow-lg border border-indigo-100 dark:border-gray-700 aspect-video lg:aspect-square flex items-center justify-center">
<img src="https://picsum.photos/id/1018/600/600" alt="Main product image" class="w-full h-full object-cover object-center transform transition-transform duration-300 hover:scale-105">
</div>
</div>
<!-- Product Details Section -->
<div class="mt-8 lg:mt-0">
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-3 tracking-tight leading-tight">
Pastel Dream Headphones
</h1>
<p class="text-2xl font-semibold text-indigo-600 dark:text-indigo-400 mb-6">
$199.99
</p>
<div class="mb-8">
<h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h2>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
Experience pure audio bliss with the Pastel Dream Headphones. Designed for comfort and style, these over-ear headphones deliver rich, balanced sound with deep bass and clear trebles. Perfect for music lovers and podcast enthusiasts.
</p>
</div>
<!-- Product Attributes/Features -->
<div class="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center text-gray-700 dark:text-gray-300 group">
<svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 12.728l-.707-.707M6 18H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2h-2M18 9a2 2 0 01-2 2H8a2 2 0 01-2-2V5h12v4z"></path>
</svg>
<span class="font-medium text-lg">Wireless Connectivity</span>
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 group">
<svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium text-lg">20-Hour Battery Life</span>
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 group">
<svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<span class="font-medium text-lg">Noise Cancellation</span>
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 group">
<svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A6.5 6.5 0 0012 21a6.5 6.5 0 00-4.06-11.832c.983-4.004 4.544-7 8.56-7s7.577 2.996 8.56 7A6.5 6.5 0 0012 3a6.5 6.5 0 00-4.06 11.832z"></path>
</svg>
<span class="font-medium text-lg">Comfort-Fit Design</span>
</div>
</div>
<!-- Add to Cart (Placeholder for Forum/Community interaction) -->
<div class="flex flex-col sm:flex-row gap-4 mb-8">
<button class="flex-1 py-3 px-6 rounded-xl bg-indigo-500 text-white font-semibold text-lg shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 transition-all duration-200 transform active:scale-95 hover:scale-105">
<span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg> Join Discussion</span>
</button>
<button class="flex-1 py-3 px-6 rounded-xl bg-pink-200 text-pink-700 dark:bg-pink-700 dark:text-pink-100 font-semibold text-lg shadow-md hover:bg-pink-300 dark:hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-pink-100 dark:focus:ring-pink-800 transition-all duration-200 transform active:scale-95 hover:scale-105">
<span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> Add to Wishlist</span>
</button>
</div>
<!-- Customer Reviews/Community Testimonial (Forum Focus) -->
<div>
<h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">What Our Community Says:</h2>
<div class="flex items-start bg-purple-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm group hover:shadow-md transition-all duration-200">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-300 dark:ring-purple-600 mr-4 flex-shrink-0 transform transition-transform duration-300 group-hover:scale-110">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">~ MusicLover22</p>
<p class="text-sm text-gray-600 dark:text-gray-400">"Absolutely stunning! The sound quality is phenomenal, and they're so comfortable for long listening sessions. Plus, the pastel colors are just adorable!"</p>
<div class="flex text-yellow-500 text-sm mt-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Produktgalerie"
Eine einfache, reaktionsschnelle Produktgaleriekomponente mit einem glasmorphischen Designstil, einem Schwarz-Weiß-Farbschema mit einem hellen Akzent, geeignet für Jobbörsen oder Karriereplattformen. Beinhaltet Unterstützung für den Dunkelmodus.
Komponente "Produktgalerie"
Eine Produktgalerie-Komponente, die im Material Design-Stil mit einem triadischen Farbschema entworfen wurde. Es bietet rasterbasierte Layouts, reaktionsschnelle Animationen und unterstützt dunkle Themen. Die Galerie enthält Bilder und Avatare und eignet sich für ein Dashboard.
Watercolor_Artistic_Dating_Product_Gallery
Eine komplexe, reaktionsschnelle Produktgalerie-Komponente mit einem "Aquarell/Künstlerisch"-Designstil und einem "Süßigkeiten/Süß"-Farbschema, geeignet für Dating- und Social-Media-Plattformen. Bietet mehrere interaktive Elemente, Unterstützung für den Dunkelmodus und semantisches HTML.