제품 비교

제품 비교 구성 요소

어두운 테마를 지원하는 반응형 제품 비교 구성 요소로, 미니멀리스트/플랫 디자인과 파스텔 색상 구성표를 특징으로 합니다. 이 복잡한 구성 요소는 대시보드에 적합하므로 사용자는 자세한 사양과 대화형 요소가 있는 여러 제품을 비교할 수 있습니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>

  <!-- Comparison Table -->
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-lime-50 dark:bg-lime-900">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
        </tr>
        <!-- Add more rows for additional features as needed -->
      </tbody>
    </table>
  </div>

  <!-- Call to Action Buttons -->
  <div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product A
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product B
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
      Buy Product C (Out of Stock)
    </button>
  </div>

  <!-- Additional Interactive Elements -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Product A Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>High performance processor</li>
        <li>Long-lasting battery</li>
        <li>Excellent user reviews</li>
      </ul>
    </div>

    <!-- Product B Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Superior camera quality</li>
        <li>Sleek, slim design</li>
        <li>Advanced security features</li>
      </ul>
    </div>

    <!-- Product C Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Budget-friendly option</li>
        <li>Good for everyday use</li>
        <li>Compact and portable</li>
      </ul>
    </div>
  </div>

  <!-- User Reviews Section -->
  <div class="mt-8">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
    <div class="space-y-4">
      <!-- Review 1 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
          <p class="text-sm text-yellow-500">★★★★★</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
        </div>
      </div>
      <!-- Review 2 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
          <p class="text-sm text-yellow-500">★★★★☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
        </div>
      </div>
      <!-- Review 3 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
          <p class="text-sm text-yellow-500">★★★☆☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
        </div>
      </div>
    </div>
  </div>
</div>

제품 비교 구성 요소

Skeuomorphism 디자인 스타일, 파스텔 색 구성표 및 보통 복잡성 수준을 갖춘 제품 비교 구성 요소로, 대시보드용으로 설계되었습니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 어두운 테마 지원이 포함됩니다.

미리보기 열기

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'selector',
            theme: {
                extend: {
                    colors: {
                        pastelPink: '#FFD1DC',
                        pastelBlue: '#AEC6CF',
                        pastelGreen: '#77DD77',
                        pastelYellow: '#FDFD96',
                        pastelPurple: '#B39EB5',
                        darkBackground: '#2D3748',
                        darkCard: '#4A5568',
                        darkText: '#E2E8F0'
                    },
                    boxShadow: {
                        skeuo: '9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff',
                        skeuoDark: '9px 9px 18px #222B36, -9px -9px 18px #384350'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-200 dark:bg-darkBackground p-8">

    <div class="max-w-6xl mx-auto bg-white dark:bg-darkCard rounded-xl shadow-skeuo dark:shadow-skeuoDark p-8">
        <h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-darkText text-center">Product Comparison</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <!-- Product 1 -->
            <div class="bg-pastelPink dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Alpha</h2>
                <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature B</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Feature C</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 2 -->
            <div class="bg-pastelBlue dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Beta</h2>
                <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature D</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature E</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 3 -->
            <div class="bg-pastelGreen dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Gamma</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Product Gamma" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature F</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" 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> Feature G</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

Neumorphism Product Comparison 구성 요소

Neumorphism 스타일의 간단하고 반응이 빠른 제품 비교 구성 요소로, 흙색, 어두운 테마 지원 및 JavaScript가 없습니다.

미리보기 열기

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-inner">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    </div>
</div>

EarthyProductComparison (어시제품비교)

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

미리보기 열기

                <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>

제품 비교 구성 요소 - Retro Corporate Style

단색 블루 색 구성표를 사용하여 레트로/빈티지 기업 미학을 가미한 반응형 제품 비교 구성 요소입니다. 다양한 인터랙티브 요소와 다크 모드 지원이 특징입니다. 이 디자인에는 80/90년대에서 영감을 받은 기하학적 패턴, 올드스쿨 타이포그래피, 픽셀과 같은 액센트가 있는 레트로 스타일의 카드가 포함됩니다. 전문성을 유지하면서 향수를 불러일으키는 디자인으로 눈에 띄고자 하는 비즈니스 웹사이트에 적합합니다.

미리보기 열기

                <!-- Product Comparison Component with Retro/Vintage 80s/90s Corporate Style -->
<div class="bg-blue-50 dark:bg-blue-900 py-12 px-4 font-mono">
  <!-- Retro Header with pixelated border -->
  <div class="max-w-7xl mx-auto mb-12">
    <div class="border-4 border-blue-600 dark:border-blue-400 p-4 bg-white dark:bg-blue-800 shadow-lg relative overflow-hidden">
      <div class="absolute top-0 right-0 w-24 h-24 bg-blue-300 dark:bg-blue-500 transform rotate-45 translate-x-12 -translate-y-12"></div>
      <h2 class="text-4xl font-bold tracking-wider text-blue-800 dark:text-blue-200 uppercase text-center mb-2 relative z-10">PRODUCT COMPARISON</h2>
      <p class="text-blue-600 dark:text-blue-300 text-center tracking-wide relative z-10">Select the perfect solution for your business needs</p>
      <!-- Pixelated line decoration -->
      <div class="flex justify-center mt-4">
        <div class="flex space-x-1">
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-12 h-3 bg-blue-700 dark:bg-blue-100"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filter Controls with Retro Style -->
  <div class="max-w-7xl mx-auto mb-10">
    <div class="bg-blue-100 dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500 p-4 rounded grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Filter By Category</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>All Categories</option>
          <option>Basic Solutions</option>
          <option>Advanced Solutions</option>
          <option>Enterprise Solutions</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Sort By</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>Price: Low to High</option>
          <option>Price: High to Low</option>
          <option>Popularity</option>
          <option>Features</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">View Style</label>
        <div class="flex space-x-4">
          <button class="flex-1 py-2 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 shadow-md">
            <span class="block text-xs">Grid</span>
          </button>
          <button class="flex-1 py-2 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 text-blue-800 dark:text-blue-100 font-bold border-2 border-blue-400 dark:border-blue-500 shadow-md">
            <span class="block text-xs">List</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Comparison Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Product 1 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">BASIC PLAN</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Starter Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$199</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/basic/400/200" alt="Basic Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">5 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">10GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Basic Analytics</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-200 dark:bg-blue-700"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
    
    <!-- Product 2 (Featured) -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-600 dark:border-blue-300 shadow-xl transform hover:scale-105 transition-all duration-300 relative -mt-4 md:-mt-8">
      <!-- "MOST POPULAR" badge -->
      <div class="absolute -top-4 left-0 right-0 flex justify-center">
        <div class="bg-blue-600 dark:bg-blue-400 text-white dark:text-blue-900 py-1 px-6 text-sm font-bold uppercase tracking-wider shadow-lg">
          MOST POPULAR
        </div>
      </div>
      
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-500 dark:bg-blue-400 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
        </div>
        <h3 class="text-white dark:text-blue-900 text-2xl font-bold text-center uppercase tracking-wider mb-1">PRO PLAN</h3>
        <div class="text-blue-100 dark:text-blue-700 text-center font-bold">Business Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$499</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/pro/400/200" alt="Pro Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">25 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">100GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-700 dark:bg-blue-300 hover:bg-blue-800 dark:hover:bg-blue-200 text-white dark:text-blue-900 font-bold border-2 border-blue-900 dark:border-blue-400 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-500 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400"></div>
    </div>
    
    <!-- Product 3 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">ENTERPRISE</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Complete Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$999</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/enterprise/400/200" alt="Enterprise Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Unlimited Users</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">1TB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Enterprise Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support 24/7</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
  </div>

  <!-- Comparison Table -->
  <div class="max-w-7xl mx-auto mt-16 bg-white dark:bg-blue-800 border-4 border-blue-500 dark:border-blue-400 shadow-lg overflow-x-auto">
    <div class="text-center py-6 bg-blue-200 dark:bg-blue-700 uppercase tracking-wider font-bold text-blue-800 dark:text-blue-100 text-2xl">
      Detailed Comparison
    </div>
    <table class="w-full border-collapse">
      <thead class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100">
        <tr>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-left">Features</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center">Basic Plan</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center bg-blue-200 dark:bg-blue-600">Pro Plan</th>
          <th class="p-4 border-b-2 border-blue-300 dark:border-blue-600 text-center">Enterprise</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">User Licenses</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">5 Users</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">25 Users</td>
          <td class="p-4 text-center">Unlimited</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Storage Capacity</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">10GB</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">100GB</td>
          <td class="p-4 text-center">1TB</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Analytics</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Basic</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Advanced</td>
          <td class="p-4 text-center">Enterprise</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Support</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Email Only</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Email & Phone</td>
          <td class="p-4 text-center">24/7 Priority</td>
        </tr>
        <tr>
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Custom Reports</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">
            <div class="inline-block w-6 h-6 bg-blue-200 dark:bg-blue-700 relative">
              <div class="absolute inset-0 transform rotate-45 bg-blue-500 dark:bg-blue-400" style="clip-path: polygon(0 0, 100% 100%, 0 100%);"></div>
            </div>
          </td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
          <td class="p-4 text-center">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Customer Testimonial with Retro Style -->
  <div class="max-w-5xl mx-auto mt-16 bg-gradient-to-r from-blue-100 via-blue-200 to-blue-100 dark:from-blue-700 dark:via-blue-600 dark:to-blue-700 p-1">
    <div class="bg-white dark:bg-blue-800 p-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="mb-6 md:mb-0 md:mr-8 flex-shrink-0">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Customer" class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-500">
        </div>
        <div>
          <p class="text-blue-800 dark:text-blue-200 italic mb-4">"This product comparison tool helped our company make the right decision for our business needs. The intuitive interface and detailed feature breakdown made it easy to understand the value proposition of each plan."</p>
          <div class="font-bold text-blue-600 dark:text-blue-300">Sarah Johnson</div>
          <div class="text-blue-500 dark:text-blue-400 text-sm">CTO, TechCorp Industries</div>
        </div>
      </div>
    </div>
  </div>

  <!-- FAQ Section -->
  <div class="max-w-5xl mx-auto mt-16 mb-16">
    <h3 class="text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6 text-center uppercase tracking-wider">Frequently Asked Questions</h3>
    
    <div class="space-y-4">
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Can I upgrade or downgrade my plan later?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, you can easily upgrade or downgrade your plan at any time. Changes will be reflected on your next billing cycle.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Is there a free trial available?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">We offer a 14-day free trial on all our plans. No credit card required to start your trial period.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Do you offer custom enterprise solutions?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, we can tailor our Enterprise plan to meet your specific business requirements. Contact our sales team for a custom quote.</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Retro Footer -->
  <div class="max-w-7xl mx-auto mt-8 bg-blue-800 dark:bg-blue-950 text-white p-4 text-center">
    <div class="flex space-x-1 justify-center mb-4">
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-20 h-3 bg-blue-200 dark:bg-blue-700"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
    </div>
    <p class="uppercase tracking-widest text-sm font-bold">© 2023 Your Professional Business</p>
  </div>
</div>

제품 비교 구성 요소

브루탈리즘 디자인 스타일의 제품 비교 구성 요소로, 생생한 색상과 적당한 복잡성을 특징으로 하여 제품을 선보이거나 포트폴리오에서 작업할 수 있습니다.

미리보기 열기

                <div class="bg-gray-900 dark:bg-gray-800 text-white p-5 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-violet-500">Product Comparison</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-5">
    <div class="bg-red-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=1" alt="Product 1" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product One</h2>
      <p class="mt-2">Description of Product One. This product is amazing!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$99</span>
        <button class="bg-white text-red-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-green-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=2" alt="Product 2" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Two</h2>
      <p class="mt-2">Description of Product Two. A fantastic choice!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$149</span>
        <button class="bg-white text-green-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-blue-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=3" alt="Product 3" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Three</h2>
      <p class="mt-2">Description of Product Three. Best-selling product!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$199</span>
        <button class="bg-white text-blue-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
  </div>
  <div class="mt-8">
    <h1 class="text-2xl font-bold text-violet-500">User Reviews</h1>
    <div class="flex flex-col space-y-4 mt-3">
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">John Doe</p>
          <p class="text-gray-300 dark:text-gray-200">"Loved this product, it changed my life!"</p>
        </div>
      </div>
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">Jane Smith</p>
          <p class="text-gray-300 dark:text-gray-200">"I wasn't sure at first, but now I can't live without it!"</p>
        </div>
      </div>
    </div>
  </div>
</div>

제품 비교 구성 요소

미니멀리스트/플랫 디자인, 어스 톤 색상 구성표 및 Tailwind CSS를 사용한 대시보드 목적의 중간 복잡성이 있는 제품 비교 구성 요소. 구성 요소는 반응형이며 어두운 테마를 지원합니다. 자바스크립트가 없습니다.

미리보기 열기

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Comparison</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-800 p-8">

<div class="container mx-auto bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Product Comparison</h2>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
            <thead>
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product C</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$199.99</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$249.99</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$299.99</td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Screen Size</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">13 inch</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">15 inch</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">14 inch</td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Storage</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">512GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
                </tr>
                 <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">RAM</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">16GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
                </tr>
                 <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Battery Life</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10 hours</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">12 hours</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">11 hours</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>

제품 비교 구성 요소

머티리얼 디자인(Material Design) 원칙에 따라 설계된 복잡한 제품 비교 구성 요소로, 생생한 색 구성표와 다크 모드 지원을 특징으로 합니다. 소셜 미디어 네트워킹 인터페이스에 이상적입니다.

미리보기 열기

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>
</div>

레트로빈티지제품비교

Dashboard를 위한 Retro/Vintage 제품 비교 구성 요소. 다크 모드를 지원하는 심플한 단색 디자인. Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

제품 비교 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 제품 비교 구성 요소입니다. 비교를 위해 제품 이름, 기능 및 가격을 표시합니다.

미리보기 열기

                <div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Product 1 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
        </ul>
        <div class="text-2xl font-bold text-center">$49/m</div>
      </div>
      
      <!-- Product 2 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Beta</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
        </ul>
        <div class="text-2xl font-bold text-center">$79/m</div>
      </div>
      
      <!-- Product 3 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
          <li>Feature F</li>
        </ul>
        <div class="text-2xl font-bold text-center">$99/m</div>
      </div>
      
    </div>
  </div>
</div>

카테고리