EarthyProductComparison (어시제품비교)
전자 상거래를 위한 반응형 제품 비교 구성 요소로, 3개의 제품 카드를 제공합니다. 흙색 색 구성표(갈색, 녹색, 호박색)와 깊이와 참여를 위한 그림자 및 악센트 막대와 같은 간단한 3D 디자인 요소를 사용하여 Tailwind CSS로 스타일링했습니다. 다크 모드 지원을 포함하며 picsum.photos의 자리 표시자 이미지를 사용합니다.
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>