製品比較

製品比較コンポーネント

ダークテーマをサポートするレスポンシブ製品比較コンポーネントで、ミニマリスト/フラットなデザインとパステルカラーの配色が特徴です。この複雑なコンポーネントはダッシュボードに適しており、ユーザーは詳細な仕様とインタラクティブな要素を持つ複数の製品を比較できます。

プレビューを開く

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

ニューモーフィズム製品比較コンポーネント

アースカラー、ダークテーマのサポート、JavaScriptなしのNeumorphismスタイルのシンプルでレスポンシブな製品比較コンポーネント。

プレビューを開く

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

EarthyProduct比較

3 つの商品カードを備えた、e コマース向けのレスポンシブ商品比較コンポーネント。アースカラーの配色(ブラウン、グリーン、アンバー)と、奥行きとエンゲージメントのためのシャドウやアクセントバーなどのシンプルな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>

単色の青の配色を使用したレトロ/ビンテージの企業の美学を備えたレスポンシブ製品比較コンポーネント。複数のインタラクティブ要素とダークモードのサポートを備えています。デザインには、80年代/90年代にインスパイアされた幾何学模様、昔ながらのタイポグラフィ、ピクセルのようなアクセントを備えたレトロなスタイルのカードが含まれています。プロフェッショナリズムを維持しながら、ノスタルジックなデザインで目立ちたいビジネスWebサイトに最適です。

プレビューを開く

                <!-- 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を使用したダッシュボード用の適度な複雑さを備えた製品比較コンポーネント。このコンポーネントはレスポンシブで、ダークテーマをサポートしています。JavaScript はありません。

プレビューを開く

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

製品比較コンポーネント

マテリアルデザインの原則に基づいて設計された複雑な製品比較コンポーネントで、鮮やかな配色とダークモードのサポートが特徴です。ソーシャルメディアネットワーキングインターフェースに最適です。

プレビューを開く

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

レトロビンテージ製品比較

ダッシュボード用のレトロ/ビンテージ製品比較コンポーネント。ダークモードをサポートするシンプルなモノクロデザイン。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>

カテゴリ

製品比較コンポーネント

製品比較コンポーネント

ニューモーフィズム製品比較コンポーネント

EarthyProduct比較

製品比較コンポーネント - レトロなコーポレートスタイル

製品比較コンポーネント

製品比較コンポーネント

製品比較コンポーネント

レトロビンテージ製品比較

製品比較コンポーネント