Komponenten
Produktvergleich
Produktvergleichskomponente - Organische/von der Natur inspirierte Herbstfarben
Produktvergleichskomponente - Organische/von der Natur inspirierte Herbstfarben
Eine komplexe, reaktionsschnelle Produktvergleichskomponente mit einem organischen/von der Natur inspirierten Design in Herbstfarben. Geeignet für Sport- und Fitnessanwendungen, mit vollständiger Unterstützung des Dunkelmodus.
HTML-Code
<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
Compare Your Game Changers
</h2>
<p class="mt-4 mb-12 text-xl text-center text-stone-700 dark:text-stone-300 max-w-3xl mx-auto leading-relaxed">
Find the perfect fit for your athletic journey by comparing features, performance, and value across our top picks.
</p>
<div class="overflow-x-auto relative shadow-2xl rounded-3xl bg-white dark:bg-stone-800 p-2" style="background: linear-gradient(135deg, var(--tw-bg-from) 0%, var(--tw-bg-to) 100%); --tw-bg-from: #fef3c7; --tw-bg-to: #fed7aa; dark:--tw-bg-from: #3f3f46; dark:--tw-bg-to: #292524;">
<table class="w-full text-left table-fixed border-separate [border-spacing:0.5rem] md:[border-spacing:1rem]">
<thead>
<tr class="text-sm text-stone-600 dark:text-stone-300 uppercase leading-snug">
<th class="hidden lg:table-cell w-[12rem] md:w-[15rem] py-3 pl-4 sm:pl-6 bg-transparent"></th>
<th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
<div class="absolute inset-0 bg-orange-700 dark:bg-orange-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
<p class="hidden sm:block text-orange-100 dark:text-orange-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Chosen</p>
<h3 class="text-orange-100 dark:text-orange-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">SwiftStride</h3>
</th>
<th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
<div class="absolute inset-0 bg-red-700 dark:bg-red-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
<p class="hidden sm:block text-red-100 dark:text-red-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Alternative</p>
<h3 class="text-red-100 dark:text-red-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">PeakPro</h3>
</th>
<th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
<div class="absolute inset-0 bg-brown-700 dark:bg-brown-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
<p class="hidden sm:block text-brown-100 dark:text-brown-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Advanced</p>
<h3 class="text-brown-100 dark:text-brown-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">EnduraMax</h3>
</th>
</tr>
</thead>
<tbody>
<!-- Product Images & Prices -->
<tr class="group">
<td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 text-lg align-top">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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 16l4.586-4.586a2 2 0 012.828 0L20 20m-6-6l-2-2m2-2l2-2"></path>
</svg>
<span>Product Snapshot</span>
</div>
</td>
<td class="py-4 px-2 relative font-medium group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-orange-500 dark:group-hover:border-orange-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
<img src="https://picsum.photos/id/178/150/150" alt="SwiftStride running shoes" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
<span class="block text-sm sm:text-lg lg:text-xl font-bold text-orange-700 dark:text-orange-300">$129.99</span>
<span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
</div>
</td>
<td class="py-4 px-2 relative font-medium group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-red-500 dark:group-hover:border-red-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
<img src="https://picsum.photos/id/187/150/150" alt="PeakPro hiking boots" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
<span class="block text-sm sm:text-lg lg:text-xl font-bold text-red-700 dark:text-red-300">$99.99</span>
<span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
</div>
</td>
<td class="py-4 px-2 relative font-medium group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-amber-500 dark:group-hover:border-amber-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
<img src="https://picsum.photos/id/163/150/150" alt="EnduraMax training gear" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
<span class="block text-sm sm:text-lg lg:text-xl font-bold text-brown-700 dark:text-brown-300">$149.99</span>
<span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
</div>
</td>
</tr>
<!-- Key Features -->
<tr class="group border-t border-stone-200 dark:border-stone-700 sticky top-0">
<td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4m5-12v4m-2-2h4M8 9h11a2 2 0 012 2v7a2 2 0 01-2 2H8l-4 4V9a2 2 0 012-2z"></path>
</svg>
<span>Key Features</span>
</div>
</td>
<td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full text-left">
<ul class="list-disc list-inside space-y-1 text-sm md:text-base">
<li>Lightweight</li>
<li>Responsive Sole</li>
<li>Breathable Mesh</li>
</ul>
</div>
</td>
<td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full text-left">
<ul class="list-disc list-inside space-y-1 text-sm md:text-base">
<li>Durable Traction</li>
<li>Ankle Support</li>
<li>Water-Resistant</li>
</ul>
</div>
</td>
<td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full text-left">
<ul class="list-disc list-inside space-y-1 text-sm md:text-base">
<li>Compression Fit</li>
<li>Moisture-Wicking</li>
<li>UV Protection</li>
</ul>
</div>
</td>
</tr>
<!-- Performance Rating -->
<tr class="group">
<td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm0 0V6m0 6a2 2 0 100-4 2 2 0 000 4zm12 5a2 2 0 100-4 2 2 0 000 4zm0 0V5"></path>
</svg>
<span>Performance Rating</span>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
<p class="text-orange-600 dark:text-orange-400 font-bold text-xl">9.2/10</p>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
<p class="text-red-600 dark:text-red-400 font-bold text-xl">8.5/10</p>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
<p class="text-brown-600 dark:text-brown-400 font-bold text-xl">9.5/10</p>
</div>
</td>
</tr>
<!-- Customer Reviews -->
<tr class="group border-b border-stone-200 dark:border-stone-700">
<td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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>
<span>Customer Reviews</span>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
<div class="flex items-center text-orange-500 dark:text-orange-400">
<span class="flex">★★★★★</span>
<span class="ml-1 text-sm">(2.8K reviews)</span>
</div>
<blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
"Absolutely transformed my runs! So light and supportive. A definite must-have for serious athletes."
<cite class="block not-italic mt-1 font-bold">- Alex P.</cite>
</blockquote>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
<div class="flex items-center text-red-500 dark:text-red-400">
<span class="flex">★★★★☆</span>
<span class="ml-1 text-sm">(1.5K reviews)</span>
</div>
<blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
"Great for trails, very sturdy. Took a little breaking in, but worth it for the grip and durability."
<cite class="block not-italic mt-1 font-bold">- Jamie L.</cite>
</blockquote>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
<div class="flex items-center text-brown-500 dark:text-brown-400">
<span class="flex">★★★★★</span>
<span class="ml-1 text-sm">(3.1K reviews)</span>
</div>
<blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
"Unbeatable comfort and performance. Whether gym or field, this gear keeps me cool and focused."
<cite class="block not-italic mt-1 font-bold">- Chris M.</cite>
</blockquote>
</div>
</td>
</tr>
<!-- Action Buttons -->
<tr class="group">
<td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span>Take Action</span>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
<svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
</svg>
Buy Now
</a>
<a href="#" class="mt-2 text-orange-600 dark:text-orange-400 text-xs sm:text-sm hover:underline">Learn More</a>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
<svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
</svg>
Add to Cart
</a>
<a href="#" class="mt-2 text-red-600 dark:text-red-400 text-xs sm:text-sm hover:underline">View Details</a>
</div>
</td>
<td class="py-4 px-2 text-center relative group-hover:z-10">
<div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
<div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-brown-600 hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
<svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
</svg>
Shop Now
</a>
<a href="#" class="mt-2 text-brown-600 dark:text-brown-400 text-xs sm:text-sm hover:underline">Customize</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-12 text-center">
<p class="text-stone-700 dark:text-stone-300 text-lg sm:text-xl max-w-2xl mx-auto leading-relaxed">
Still unsure? Our expert team is ready to guide you to your perfect sports gear. <a href="#" class="text-orange-700 dark:text-orange-400 font-semibold hover:underline">Contact us today!</a>
</p>
</div>
</div>
</div>Verwandte Komponenten
Produktvergleichskomponente - Neumorphism Monochromatic
Eine reaktionsschnelle Produktvergleichskomponente mit einem neumorphen Designstil und einem monochromen Farbschema, geeignet für Event-/Konferenz-Websites. Inklusive Unterstützung für den Dunkelmodus.
Produktvergleichskomponente
Eine Produktvergleichskomponente mit Skeuomorphismus-Designstil, Pastellfarbschema und mittlerer Komplexitätsstufe, die für Dashboards entwickelt wurde. Es enthält Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS.
Produktvergleichskomponente
Eine verspielte und fröhliche Produktvergleichskomponente mit abgerundeten Elementen und einem komplementären Farbschema, geeignet für ein Dashboard. Verfügt über responsives Design und Unterstützung für den Dunkelmodus.