EarthyProductComparison
Un componente de comparación de productos responsivo para el comercio electrónico, con tres tarjetas de producto. Diseñado con Tailwind CSS utilizando una combinación de colores en tonos tierra (marrones, verdes, ámbares) y elementos de diseño 3D simples como sombras y barras de acento para mayor profundidad y compromiso. Incluye soporte para el modo oscuro y utiliza imágenes de marcador de posición de picsum.photos.
Código 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>
Componentes relacionados
Componente de comparación de productos - Estilo corporativo retro
Un componente de comparación de productos receptivo con una estética corporativa retro / vintage que utiliza un esquema de color azul monocromático. Cuenta con múltiples elementos interactivos y soporte para el modo oscuro. El diseño incluye tarjetas de estilo retro con patrones geométricos inspirados en los años 80/90, tipografía de la vieja escuela y acentos tipo píxel. Perfecto para sitios web de negocios que desean destacarse con un diseño nostálgico manteniendo el profesionalismo.
Componente de comparación de productos
Un componente de comparación de productos simple diseñado para la interfaz de usuario del modo oscuro con un esquema de color en escala de grises. Cuenta con un diseño básico con elementos mínimos, ideal para el contenido del blog y la lectura.
Componente de comparación de productos
Un componente complejo de comparación de productos diseñado con los principios de Material Design, con una combinación de colores vibrantes y compatibilidad con el modo oscuro. Ideal para interfaces de redes sociales.