Confronto prodotti terrosi
Un componente reattivo per il confronto dei prodotti per l'e-commerce, con tre schede prodotto. Progettato con Tailwind CSS utilizzando una combinazione di colori dei toni della terra (marroni, verdi, ambra) e semplici elementi di design 3D come ombre e barre di accento per profondità e coinvolgimento. Include il supporto per la modalità oscura e utilizza immagini segnaposto da picsum.photos.
Codice HTML
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold text-center text-stone-800 dark:text-stone-100 mb-6">
Compare Our Outdoor Gear
</h1>
<p class="text-lg text-center text-stone-600 dark:text-stone-300 mb-12">
Find the perfect gear that fits your adventurous needs and budget.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 flex flex-col">
<div class="h-3 bg-lime-700 dark:bg-lime-600 rounded-t-xl"></div>
<div class="p-6 flex flex-col flex-grow">
<img src="https://picsum.photos/seed/ecotent/400/300" alt="Eco Nomad Tent" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
<h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Eco Nomad Tent</h3>
<p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">Durable and eco-friendly tent for the conscious explorer. Made with recycled materials.</p>
<div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>
<ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Recycled PET Fabrics
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Sleeps 2-3 People
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Excellent Ventilation
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
Basic Weatherproofing
</li>
</ul>
<div class="mt-auto">
<div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$199</div>
<button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
View Details
</button>
</div>
</div>
</div>
<!-- Product 2 (Highlight/Most Popular) -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 ring-2 ring-amber-600 dark:ring-amber-500 flex flex-col relative">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
<span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-amber-600 text-white shadow-lg">
Most Popular
</span>
</div>
<div class="h-3 bg-amber-600 dark:bg-amber-500 rounded-t-xl"></div>
<div class="p-6 flex flex-col flex-grow pt-8">
<img src="https://picsum.photos/seed/terrapack/400/300" alt="Terra Peak Backpack" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
<h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Terra Peak Backpack</h3>
<p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">All-weather backpack with ergonomic design for long treks. Premium, sustainable materials.</p>
<div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>
<ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Sustainable Hemp & Cork Accents
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
50L Capacity with Smart Pockets
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Fully Waterproof Shell
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Integrated Rain Cover & Hydration Sleeve
</li>
</ul>
<div class="mt-auto">
<div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$279</div>
<button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 flex flex-col">
<div class="h-3 bg-emerald-700 dark:bg-emerald-600 rounded-t-xl"></div>
<div class="p-6 flex flex-col flex-grow">
<img src="https://picsum.photos/seed/pathboots/400/300" alt="Pathfinder Boots" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
<h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Pathfinder Boots</h3>
<p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">Lightweight and comfortable boots for day hikes and trail walking. Great value for beginners.</p>
<div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>
<ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Breathable Mesh Uppers
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Good Traction Rubber Sole
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
Minimal Ankle Support
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
Not Fully Waterproof
</li>
</ul>
<div class="mt-auto">
<div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$129</div>
<button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
Learn More
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Skeuomorphic_Product_Comparison_Component
Un componente di confronto dei prodotti semplice e reattivo con un design scheumorfico che utilizza una combinazione di colori blu scuro monocromatica, adatto per applicazioni di dashboard. Include il supporto per la modalità oscura.
Componente di confronto dei prodotti
Un componente di confronto dei prodotti semplice e reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizza i nomi dei prodotti, le funzionalità e i prezzi per il confronto.
Componente di confronto dei prodotti
Componente di confronto dei prodotti con design minimalista/piatto, combinazione di colori dei toni della terra e complessità moderata per scopi di dashboard utilizzando Tailwind CSS. Il componente è reattivo e supporta il tema scuro. Niente JavaScript.