CCHub Logo CCHub Tailwind Collection
구성 요소 제품 비교 EarthyProductComparison (어시제품비교)

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>

관련 구성 요소

제품 비교 구성 요소 - Crypto

럭셔리/프리미엄 디자인, 사탕/달콤한 색 구성표를 갖춘 반응형 제품 비교 구성 요소로, 암호화폐/블록체인 애플리케이션에 맞게 조정되었습니다. 다크 모드 지원, 우아한 타이포그래피 및 자리 표시자 데이터가 특징입니다.

열다

제품 비교 구성 요소 - Neumorphism Monochromatic

뉴모픽 디자인 스타일과 단색 색 구성표를 갖춘 반응형 제품 비교 구성 요소로, 이벤트/컨퍼런스 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Skeuomorphic_Product_Comparison_Component

단색의 짙은 파란색 색 구성표를 사용하는 스큐어모픽 디자인의 간단하고 반응이 빠른 제품 비교 구성 요소로, 대시보드 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.

열다