EarthyProductComparison
A responsive product comparison component for e-commerce, featuring three product cards. Styled with Tailwind CSS using an earth tone color scheme (browns, greens, ambers) and simple 3D design elements like shadows and accent bars for depth and engagement. Includes dark mode support and uses placeholder images from picsum.photos.
HTML Code
<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>
Related Components
Product Comparison Component
A simple, responsive product comparison component with a glassmorphism design, earth tone color scheme, and dark mode support. It displays two product cards side-by-side on larger screens and stacked on smaller screens.
Product Comparison Component
A responsive product comparison component styled with Material Design using Tailwind CSS, featuring grid-based layouts, shadows, and dark theme support.
Product Comparison Component
A skeuomorphic product comparison component designed with Tailwind CSS featuring responsive effects and dark theme support.