検索コンポーネント

カテゴリ

製品比較

複数の製品を比較するためのツール

製品比較コンポーネント

ダッシュボードに適した、丸みを帯びた要素と補色配色を備えた遊び心のある陽気な製品比較コンポーネント。レスポンシブデザインとダークモードのサポートが特徴です。

                <div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product 1 Card -->
    <div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
      
      <ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Super Speedy Performance</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Unlimited Whimsical Widgets</li>
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> No Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Friendly Support Sprites</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
          Choose Alpha!
        </button>
      </div>
    </div>

    <!-- Product 2 Card -->
    <div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
      

      <ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> Standard Speed</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Dazzling Gimmicks Included</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Exclusive Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Mythical Support Beings</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
          Select Beta!
        </button>
      </div>
    </div>
  </div>
</div>

製品比較コンポーネント - Neumorphism Monochromatic

ニューモルフィックなデザインスタイルと単色の配色を備えたレスポンシブ製品比較コンポーネントで、イベント/会議のWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gray-200 p-4 dark:bg-gray-800 flex items-center justify-center font-sans">

  <div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
      Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
    </h2>

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

      <!-- Plan 1: Basic Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>

          <div class="text-4xl font-extrabold mb-8">
            $99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Workshop Access
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Standard Pass
        </button>
      </div>

      <!-- Plan 2: Premium Pass (Recommended) -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
          Recommended
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>

          <div class="text-4xl font-extrabold mb-8">
            $249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Full Workshop Access
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get VIP Pass
        </button>
      </div>

      <!-- Plan 3: Enterprise Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>

          <div class="text-4xl font-extrabold mb-8">
            $499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              All VIP Pass Features
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              5 Team Members Included
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Dedicated Support
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Private Networking Lounge Access
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Team Bundle
        </button>
      </div>

    </div>
  </div>

  <!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
  <style>
    .shadow-xl {
      box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-xl-dark {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
    }
    .shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
    }

    .shadow-neumorphic-button {
      box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic-button-dark {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-button-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
    }
  </style>

</div>

製品比較コンポーネント - オーガニック/自然にインスパイアされた秋の色

有機的/自然にインスパイアされたデザインで、秋の色を使用した複雑で応答性の高い製品比較コンポーネント。スポーツやフィットネスのアプリケーションに適しており、ダークモードを完全にサポートしています。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Compare Your Game Changers
    </h2>
    <p class="mt-4 mb-12 text-xl text-center text-stone-700 dark:text-stone-300 max-w-3xl mx-auto leading-relaxed">
      Find the perfect fit for your athletic journey by comparing features, performance, and value across our top picks.
    </p>

    <div class="overflow-x-auto relative shadow-2xl rounded-3xl bg-white dark:bg-stone-800 p-2" style="background: linear-gradient(135deg, var(--tw-bg-from) 0%, var(--tw-bg-to) 100%); --tw-bg-from: #fef3c7; --tw-bg-to: #fed7aa; dark:--tw-bg-from: #3f3f46; dark:--tw-bg-to: #292524;">
      <table class="w-full text-left table-fixed border-separate [border-spacing:0.5rem] md:[border-spacing:1rem]">
        <thead>
          <tr class="text-sm text-stone-600 dark:text-stone-300 uppercase leading-snug">
            <th class="hidden lg:table-cell w-[12rem] md:w-[15rem] py-3 pl-4 sm:pl-6 bg-transparent"></th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-orange-700 dark:bg-orange-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-orange-100 dark:text-orange-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Chosen</p>
              <h3 class="text-orange-100 dark:text-orange-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">SwiftStride</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-red-700 dark:bg-red-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-red-100 dark:text-red-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Alternative</p>
              <h3 class="text-red-100 dark:text-red-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">PeakPro</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-brown-700 dark:bg-brown-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-brown-100 dark:text-brown-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Advanced</p>
              <h3 class="text-brown-100 dark:text-brown-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">EnduraMax</h3>
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Images & Prices -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 text-lg align-top">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L20 20m-6-6l-2-2m2-2l2-2"></path>
                </svg>
                <span>Product Snapshot</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-orange-500 dark:group-hover:border-orange-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/178/150/150" alt="SwiftStride running shoes" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-orange-700 dark:text-orange-300">$129.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-red-500 dark:group-hover:border-red-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/187/150/150" alt="PeakPro hiking boots" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-red-700 dark:text-red-300">$99.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-amber-500 dark:group-hover:border-amber-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/163/150/150" alt="EnduraMax training gear" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-brown-700 dark:text-brown-300">$149.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
          </tr>

          <!-- Key Features -->
          <tr class="group border-t border-stone-200 dark:border-stone-700 sticky top-0">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4m5-12v4m-2-2h4M8 9h11a2 2 0 012 2v7a2 2 0 01-2 2H8l-4 4V9a2 2 0 012-2z"></path>
                </svg>
                <span>Key Features</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Lightweight</li>
                  <li>Responsive Sole</li>
                  <li>Breathable Mesh</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Durable Traction</li>
                  <li>Ankle Support</li>
                  <li>Water-Resistant</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Compression Fit</li>
                  <li>Moisture-Wicking</li>
                  <li>UV Protection</li>
                </ul>
              </div>
            </td>
          </tr>

          <!-- Performance Rating -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm0 0V6m0 6a2 2 0 100-4 2 2 0 000 4zm12 5a2 2 0 100-4 2 2 0 000 4zm0 0V5"></path>
                </svg>
                <span>Performance Rating</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-orange-600 dark:text-orange-400 font-bold text-xl">9.2/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-red-600 dark:text-red-400 font-bold text-xl">8.5/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-brown-600 dark:text-brown-400 font-bold text-xl">9.5/10</p>
              </div>
            </td>
          </tr>

          <!-- Customer Reviews -->
          <tr class="group border-b border-stone-200 dark:border-stone-700">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                </svg>
                <span>Customer Reviews</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-orange-500 dark:text-orange-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(2.8K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Absolutely transformed my runs! So light and supportive. A definite must-have for serious athletes."
                  <cite class="block not-italic mt-1 font-bold">- Alex P.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-red-500 dark:text-red-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
                  <span class="ml-1 text-sm">(1.5K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Great for trails, very sturdy. Took a little breaking in, but worth it for the grip and durability."
                  <cite class="block not-italic mt-1 font-bold">- Jamie L.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-brown-500 dark:text-brown-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(3.1K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Unbeatable comfort and performance. Whether gym or field, this gear keeps me cool and focused."
                  <cite class="block not-italic mt-1 font-bold">- Chris M.</cite>
                </blockquote>
              </div>
            </td>
          </tr>

          <!-- Action Buttons -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span>Take Action</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Buy Now
                </a>
                <a href="#" class="mt-2 text-orange-600 dark:text-orange-400 text-xs sm:text-sm hover:underline">Learn More</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Add to Cart
                </a>
                <a href="#" class="mt-2 text-red-600 dark:text-red-400 text-xs sm:text-sm hover:underline">View Details</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-brown-600 hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Shop Now
                </a>
                <a href="#" class="mt-2 text-brown-600 dark:text-brown-400 text-xs sm:text-sm hover:underline">Customize</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-12 text-center">
      <p class="text-stone-700 dark:text-stone-300 text-lg sm:text-xl max-w-2xl mx-auto leading-relaxed">
        Still unsure? Our expert team is ready to guide you to your perfect sports gear. <a href="#" class="text-orange-700 dark:text-orange-400 font-semibold hover:underline">Contact us today!</a>
      </p>
    </div>
  </div>
</div>

製品比較コンポーネント - 水彩/アーティスティック

工業/製造用に設計された複雑な単色の製品比較コンポーネントで、ダークモードをサポートするソフトな水彩画/芸術的な美学が特徴です。ユーザーは複数の製品を並べて比較できます。

開けるプレビュー

                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans overflow-x-auto">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center text-indigo-900 dark:text-indigo-100 mb-8 sm:mb-12 tracking-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
      Industrial Product Comparison
    </h2>
    <p class="text-center text-lg text-indigo-700 dark:text-indigo-300 mb-10 sm:mb-16 max-w-2xl mx-auto leading-relaxed">
      Compare the features and specifications of our high-performance industrial equipment. Make an informed decision for your manufacturing needs.
    </p>

    <div class="w-full overflow-x-auto relative">
      <div class="flex space-x-6 pb-4 sm:pb-6 pr-4" style="min-width: fit-content;">
        <!-- Feature Column Header -->
        <div class="flex-shrink-0 w-64 min-w-[250px] bg-indigo-200/50 dark:bg-gray-700/50 rounded-lg p-6 flex flex-col justify-between shadow-lg border border-indigo-300 dark:border-gray-600 backdrop-blur-sm">
          <h3 class="text-2xl font-bold text-indigo-900 dark:text-indigo-100 mb-6">Features</h3>
          <ul class="space-y-4 text-indigo-800 dark:text-indigo-200 text-lg flex-grow">
            <li class="font-semibold py-2">Product Image</li>
            <li class="font-semibold py-2">Product Name</li>
            <li class="font-semibold py-2">Model Number</li>
            <li class="font-semibold py-2">Material Strength</li>
            <li class="font-semibold py-2">Operating Temperature Range</li>
            <li class="font-semibold py-2">Power Consumption (kW)</li>
            <li class="font-semibold py-2">Durability Rating</li>
            <li class="font-semibold py-2">Warranty (Years)</li>
            <li class="font-semibold py-2">Included Accessories</li>
            <li class="font-semibold py-2">Certification Standards</li>
            <li class="font-semibold py-2">Price</li>
          </ul>
          <div class="mt-8">
            <!-- Placeholder for alignment -->
          </div>
        </div>

        <!-- Product 1 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=1" alt="Industrial Machine Alpha" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">HydraFlex 3000i</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: HFX-3000i</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">HFX-3000i</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Titanium Alloy</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-20°C to 150°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">15 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.5/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">5 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Tool Kit, Manual </span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ISO 9001, CE Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$12,500</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=2" alt="Industrial Machine Beta" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">MegaPress X100</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: MP-X100</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">MP-X100</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Reinforced Steel</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">0°C to 200°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">20 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Superior (9.8/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">7 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Hydraulic Hoses, Filters</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ASTM, RoHS Compliant</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$18,000</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 3 (Optional extra product) -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=3" alt="Industrial Machine Gamma" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">QuantumFabricator</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: QFX-500</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">QFX-500</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Carbon Fiber Composite</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-5°C to 180°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">18 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.2/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">6 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Spare Parts Kit, Software</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">CE, UL Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$15,200</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

      </div>
    </div>

    <div class="mt-16 text-center">
      <p class="text-indigo-800 dark:text-indigo-200 text-lg sm:text-xl font-medium">
        Need assistance? Our experts are ready to help you choose the right solution.
      </p>
      <a href="#" class="inline-block mt-6 px-8 py-4 bg-indigo-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-70 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Contact Sales
      </a>
    </div>
  </div>
</div>

製品比較コンポーネント - Crypto

暗号通貨/ブロックチェーンアプリケーション向けに調整された、豪華/プレミアムデザイン、キャンディー/甘い配色を備えたレスポンシブ製品比較コンポーネント。ダークモードのサポート、エレガントなタイポグラフィ、プレースホルダーデータを備えています。

開けるプレビュー

                <div class="font-sans bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden animate-fade-in">
    <header class="p-6 md:p-8 bg-gradient-to-r from-pink-400 to-purple-400 dark:from-gray-700 dark:to-gray-900 text-white dark:text-gray-100 text-center">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-2">
        Choose Your Crypto Platform
      </h1>
      <p class="text-lg md:text-xl opacity-90">
        Compare features to find your perfect blockchain solution.
      </p>
    </header>

    <div class="relative overflow-x-auto">
      <table class="w-full table-auto border-separate border-spacing-y-2 lg:border-spacing-y-4 p-4">
        <thead class="sr-only lg:not-sr-only">
          <tr>
            <th class="w-1/4 p-4 text-left text-lg font-semibold text-gray-600 dark:text-gray-300"></th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Alpha</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Beta</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Gamma</th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Headers for Mobile/Tablet -->
          <tr class="lg:hidden">
            <td class="py-4 px-2 sm:px-4 lg:px-6 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
              </div>
            </td>
          </tr>

          <!-- Product Details Row (Desktop) -->
          <tr class="hidden lg:table-row">
            <td class="py-4 px-6 text-gray-600 dark:text-gray-300 font-medium align-top"></td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
              <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
              <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
            </td>
          </tr>

          <!-- Feature Row: Consensus Mechanism -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Consensus Mechanism</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-pink-500 dark:text-pink-400">PoS (Proof of Stake)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-purple-500 dark:text-purple-400">DPoS (Delegated PoS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-green-500 dark:text-green-400">PoW (Proof of Work)</td>
          </tr>

          <!-- Feature Row: Transaction Speed -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Tx Speed (TPS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">5,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">100,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">7-10</td>
          </tr>

          <!-- Feature Row: Transaction Fees (Avg) -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Avg. Tx Fee</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">$0.01 - $0.10</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">&lt; $0.01</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-orange-600 dark:text-orange-300 font-semibold">$1 - $50 (volatile)</td>
          </tr>

          <!-- Feature Row: Smart Contract Support -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Smart Contracts</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" 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>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" 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>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-red-500 mx-auto" 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>
            </td>
          </tr>

          <!-- Feature Row: Decentralization Level -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Decentralization</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Medium-High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Very High</td>
          </tr>

          <!-- Feature Row: Typical Use Cases -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Use Cases</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">DeFi, Dapps, GameFi</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Enterprise, CBDC, Supply Chain</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Store of Value, NFTs, Payments</td>
          </tr>

          <!-- Call to Action Row -->
          <tr class="bg-gradient-to-r from-pink-50 dark:from-gray-700 via-purple-50 dark:via-gray-800 to-green-50 dark:to-gray-900 rounded-xl">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium align-middle">Get Started</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Alpha
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Beta
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Gamma
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="p-6 md:p-8 bg-gradient-to-l from-pink-400 to-purple-400 dark:from-gray-900 dark:to-gray-700 text-white dark:text-gray-100 text-center">
      <p class="text-sm opacity-80">&copy; 2023 Crypto Compare. All rights reserved.</p>
      <p class="text-xs mt-1 opacity-70">Data for illustrative purposes only. Consult official sources.</p>
    </footer>
  </div>
</div>

製品比較コンポーネント

エレガントなデザイン、洗練されたタイポグラフィ、ハイコントラストな配色を特徴とする、写真撮影機材のラグジュアリー/プレミアム製品比較コンポーネントです。レスポンシブレイアウトとダークモードのサポートが含まれています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4 sm:p-8 lg:p-12">

  <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 sm:mb-12 lg:mb-16 tracking-tight text-gray-900 dark:text-gray-50">
    Compare <span class="text-fuchsia-600 dark:text-fuchsia-500">Photography</span> Gear
  </h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">

    <!-- Product Card 1 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-fuchsia-600 dark:text-fuchsia-500 mb-2">Advanced</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Pro DSLR Camera X</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Pro DSLR Camera X" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Unrivaled image quality and blazing-fast performance for professional photographers. Durable build, ready for any challenge.
        </p>

        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>45.7MP Full-Frame Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>10 FPS Continuous Shooting</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>4K UHD Video at 60p</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>Weather Sealed Body</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$3,499</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white dark:bg-fuchsia-500 dark:hover:bg-fuchsia-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-purple-600 dark:text-purple-500 mb-2">Prosumer</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Mirrorless Camera Y</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Mirrorless Camera Y" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Compact powerhouse with incredible low-light performance and advanced video capabilities. Perfect for hybrid shooters.
        </p>
        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>33MP Full-Frame Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>759-Point AF System</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>4K 120p Video Recording</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>In-Body Image Stabilization</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$2,199</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-purple-600 hover:bg-purple-700 text-white dark:bg-purple-500 dark:hover:bg-purple-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-teal-600 dark:text-teal-500 mb-2">Entry-Level Pro</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Compact Camera Z</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Compact Camera Z" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Pocketable, powerful, and perfect for travel and street photography. Don't let its size fool you.
        </p>
        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>24.2MP APS-C Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>Fast Hybrid AF</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>3.0-inch Tilt LCD</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" 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>
            <span>Optical Viewfinder</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$1,299</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-teal-600 hover:bg-teal-700 text-white dark:bg-teal-500 dark:hover:bg-teal-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 4 - New Product Placeholder -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow flex flex-col justify-center items-center text-center">
        <div class="text-sm font-semibold tracking-wide uppercase text-gray-500 dark:text-gray-400 mb-2 whitespace-nowrap">Coming Soon</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Ultimate Lens Kit</h3>
        <img src="https://picsum.photos/400/250?random=4" alt="Ultimate Lens Kit" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700 opacity-70 grayscale">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6 flex-grow">
          Expand your creative horizons with a versatile lens collection designed for superior optical performance. Pre-order now!
        </p>
        <ul class="space-y-3 mb-6 text-gray-500 dark:text-gray-400 opacity-70">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" 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.586l-1.293-1.293z" clip-rule="evenodd"></path></svg>
            <span>Prime Lens Included</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill="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.586l-1.293-1.293z" clip-rule="evenodd"></path></svg>
            <span>Zoom Lens Features</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-500 dark:text-gray-400 mb-6">Pre-Order</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-gray-200 hover:bg-gray-300 text-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 transition-colors duration-300 cursor-not-allowed tracking-wide shadow-lg">
          Notify Me
        </button>
      </div>
    </div>

  </div>

  <!-- Call to action/footer -->
  <div class="mt-16 text-center text-gray-700 dark:text-gray-300">
    <p class="text-lg leading-relaxed mb-4">
      Considering an upgrade? Explore our full range of <a href="#" class="text-fuchsia-600 dark:text-fuchsia-500 hover:underline font-semibold">professional photo &amp; video equipment</a>.
    </p>
    <div class="flex items-center justify-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Photographer Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-600 dark:border-fuchsia-500 shadow-md">
      <p class="text-sm">
        Curated by <span class="font-bold">Elijah Stone</span>, <span class="text-gray-500 dark:text-gray-400">Pro Photographer & Gear Expert</span>
      </p>
    </div>
  </div>

</div>

製品比較コンポーネント

メンフィスデザインの美学を備えたシンプルでレスポンシブな製品比較コンポーネントで、レトロ/ビンテージカラーパレットを使用しています。CRM/ビジネスツール用に設計されており、ダークモードをサポートし、2つの製品の主要な機能を表示します。

開けるプレビュー

                <div class="bg-amber-100 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-teal-400 mb-8 text-center tracking-tight uppercase relative">
      <span class="block">Compare Products</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-pink-500 dark:bg-purple-500 rounded-full mt-2"></span>
    </h2>

    <div class="flex flex-col md:flex-row gap-6 lg:gap-8 justify-center items-stretch">

      <!-- Product Card 1 -->
      <div class="flex-1 bg-yellow-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-blue-600 dark:border-teal-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500 dark:bg-purple-600 -rotate-45 transform translate-x-12 -translate-y-12"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-teal-400 dark:bg-pink-600 rotate-45 transform -translate-x-16 translate-y-16"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-blue-800 dark:text-yellow-300 mb-4 text-center uppercase tracking-wider">Business Pro</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1015/150/150" alt="Product Lite" class="rounded-full w-24 h-24 object-cover border-4 border-blue-600 dark:border-teal-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The essential tools for growing teams.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Email</span> Marketing Suite
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Basic</span> Analytics Dashboard
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Product Pro</span>
              <span class="absolute inset-0 bg-blue-700 dark:bg-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex-1 bg-red-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-pink-600 dark:border-purple-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 dark:bg-teal-600 rotate-45 transform translate-x-16 -translate-y-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-yellow-500 dark:bg-pink-600 -rotate-45 transform -translate-x-12 translate-y-12"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300 mb-4 text-center uppercase tracking-wider">Enterprise Max</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1025/150/150" alt="Product Pro" class="rounded-full w-24 h-24 object-cover border-4 border-pink-600 dark:border-purple-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The ultimate solution for large-scale operations.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Advanced</span> Marketing Automation
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Custom</span> Reporting Engine
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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>
              <span class="font-semibold">Dedicated</span> Account Manager
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Enterprise Max</span>
              <span class="absolute inset-0 bg-pink-700 dark:bg-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
/* Define pulse-border animation */
@keyframes pulse-border {
  0% { border-color: rgba(96, 165, 250, 0.5); }
  50% { border-color: rgba(96, 165, 250, 1); }
  100% { border-color: rgba(96, 165, 250, 0.5); }
}

.dark .animate-pulse-border {
    animation: none; /* Disable on dark mode to prevent visual conflict with dark color scheme */
}

.animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
}

/* Adjust for dark mode borders here if a similar effect is desired with dark colors */
.dark .bg-gray-800.border-teal-500.dark\\:border-teal-500 {
    animation: pulse-border-dark 2s infinite ease-in-out;
}

.dark .bg-gray-800.border-purple-500.dark\\:border-purple-500 {
    animation: pulse-border-darker 2s infinite ease-in-out;
}

@keyframes pulse-border-dark {
  0% { border-color: rgba(20, 184, 166, 0.5); }
  50% { border-color: rgba(20, 184, 166, 1); }
  100% { border-color: rgba(20, 184, 166, 0.5); }
}

@keyframes pulse-border-darker {
  0% { border-color: rgba(168, 85, 247, 0.5); }
  50% { border-color: rgba(168, 85, 247, 1); }
  100% { border-color: rgba(168, 85, 247, 0.5); }
}

</style>

Skeuomorphic_Product_Comparison_Component

ダッシュボードアプリケーションに適した、単色のダークブルーの配色を使用したスキューモーフィックデザインを備えた、シンプルでレスポンシブな製品比較コンポーネントです。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl bg-blue-50 dark:bg-gray-700 rounded-xl shadow-xl border border-blue-200 dark:border-gray-600 overflow-hidden
              transform perspective-1000 rotate-x-3 transition-transform duration-500 hover:rotate-x-0 hover:scale-105 ease-in-out
              m-4 md:m-8 lg:m-12 relative">
    
    <!-- Top 'bezel' light reflection effect -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-blue-100/50 to-transparent dark:from-gray-600/50 dark:to-transparent rounded-t-xl"></div>
    
    <div class="p-6 sm:p-8 md:p-10 flex flex-col items-center">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 relative z-10
                 drop-shadow-md text-shadow-sm-light dark:text-shadow-sm-dark tracking-wide">
        Product Comparison
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <!-- Product 1 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Alpha</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-2 shadow-sm"></span>Feature C (Missing)</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$199.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset 
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Alpha
            </button>
          </div>
        </div>

        <!-- Product 2 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Beta</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature C</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$249.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Beta
            </button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Bottom 'bezel' dark reflection/shadow effect -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-blue-300/50 to-transparent dark:from-gray-950/50 dark:to-transparent rounded-b-xl"></div>
    
  </div>
</div>

<!-- Custom Styles for Skeuomorphism -->
<style>
  /* Light mode text shadow */
  .text-shadow-sm-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4),
                 -1px -1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Dark mode text shadow */
  .dark .text-shadow-sm-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  /* Outer shadow for the main container - resembles lifting off the surface */
  .shadow-xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-xl {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  }

  /* Inner shadow for product cards - resembles an indented button or screen */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0px 5px 10px -3px rgba(0, 0, 0, 0.1), inset 0px -5px 10px -3px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                inset 0px 5px 10px -3px rgba(0, 0, 0, 0.3),
                inset 0px -5px 10px -3px rgba(255, 255, 255, 0.05);
  }

  /* Active state for buttons - pressing effect */
  .active\:shadow-md-inset {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15),
                inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .dark .active\:shadow-md-inset {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3),
                 inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }

  /* 3D perspective for the main container */
  .perspective-1000 {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .rotate-x-3 {
    transform: rotateX(3deg);
  }
  .hover\:rotate-x-0:hover {
    transform: rotateX(0deg);
  }
</style>

製品比較コンポーネント

3D デザイン要素、トライアドカラースキーム、ダークモードのサポートを備えた、ダッシュボードのコンテキストに適した、複雑で応答性の高い製品比較コンポーネント。

開けるプレビュー

                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 min-h-screen p-4 sm:p-8 lg:p-12 font-sans dark:from-gray-900 dark:to-black dark:via-gray-800 text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 relative z-10 animate-fade-in-down transform scale-y-105 transition-transform duration-500 hover:scale-y-100
    bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600
    dark:from-purple-400 dark:via-pink-300 dark:to-indigo-400
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-purple-200 before:via-pink-100 before:to-indigo-200 before:blur-lg before:-z-10 before:opacity-50 dark:before:from-gray-700 dark:before:via-gray-800 dark:before:to-gray-900">
    Product Comparison
  </h1>

  <!-- Comparison Grid Container -->
  <div class="grid gap-8 lg:gap-12 xl:grid-cols-3 max-w-7xl mx-auto">

    <!-- Product Card 1 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-purple-400
      dark:from-gray-800 dark:to-gray-900 dark:border-purple-600
      after:content-[''] after:absolute after:inset-0 after:bg-purple-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Popular Choice
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product1/250/180" alt="Product A" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Product Alpha</h2>
        <p class="text-gray-600 dark:text-gray-400">Cutting-edge features for professionals.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Advanced AI Engine</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Unlimited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">24/7 Premium Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Storage</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-200
          hover:from-purple-700 hover:to-indigo-700 hover:scale-105 hover:shadow-xl hover:shadow-purple-300
          dark:from-purple-500 dark:to-indigo-500 dark:shadow-purple-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 dark:hover:shadow-purple-600">
          Choose Alpha
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-pink-400
      dark:from-gray-800 dark:to-gray-900 dark:border-pink-600
      after:content-[''] after:absolute after:inset-0 after:bg-pink-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-pink-500 to-red-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Best Value
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product2/250/180" alt="Product B" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-red-600 dark:from-pink-400 dark:to-red-400 mb-2">Product Beta</h2>
        <p class="text-gray-600 dark:text-gray-400">Balanced features for everyday use.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Intelligent Automation</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">100 GB Storage</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Support</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-pink-600 to-red-600 text-white shadow-lg shadow-pink-200
          hover:from-pink-700 hover:to-red-700 hover:scale-105 hover:shadow-xl hover:shadow-pink-300
          dark:from-pink-500 dark:to-red-500 dark:shadow-pink-700 dark:hover:from-pink-600 dark:hover:to-red-600 dark:hover:shadow-pink-600">
          Select Beta
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-yellow-400
      dark:from-gray-800 dark:to-gray-900 dark:border-yellow-600
      after:content-[''] after:absolute after:inset-0 after:bg-yellow-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-yellow-500 to-orange-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        New Arrival
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product3/250/180" alt="Product C" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-orange-600 dark:from-yellow-400 dark:to-orange-400 mb-2">Product Gamma</h2>
        <p class="text-gray-600 dark:text-gray-400">Essential features for everyday users.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Basic Analytics</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Community Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>No AI Engine</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-yellow-600 to-orange-600 text-white shadow-lg shadow-yellow-200
          hover:from-yellow-700 hover:to-orange-700 hover:scale-105 hover:shadow-xl hover:shadow-yellow-300
          dark:from-yellow-500 dark:to-orange-500 dark:shadow-yellow-700 dark:hover:from-yellow-600 dark:hover:to-orange-600 dark:hover:shadow-yellow-600">
          Choose Gamma
        </button>
      </div>
    </div>

  </div>

  <!-- Key Feature Comparison Table (Optional for more complexity) -->
  <div class="mt-16 bg-white dark:bg-gray-850 p-8 rounded-3xl shadow-2xl overflow-x-auto relative z-10 animate-fade-in-up
    border border-gray-100 dark:border-gray-700
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-50 before:via-pink-50 before:to-yellow-50 before:blur-3xl before:-z-10 before:opacity-50 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-900">
    <h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-600 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-400 mb-8 text-center">Detailed Feature Comparison</h3>
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-750">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tl-xl">Feature</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Alpha</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Beta</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tr-xl">Product Gamma</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">AI Capabilities</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-rose-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Storage Capacity</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Variable</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">100 GB</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">50 GB</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Integrations</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Unlimited</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Standard</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Basic</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Support</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">24/7 Premium</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Email/Chat</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Community</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Uptime Guarantee</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.9%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.5%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99%</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<style>
  /* This is for the '3D' effect on images and cards */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-x-6 {
    transform: rotateX(6deg);
  }

  /* Keyframe for fade-in-down animation */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  /* Keyframe for fade-in-up animation */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  /* Custom shadow for pseudo 3D effect on hover */
  .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), /* Default Tailwind 2xl */
                0 0 60px -15px rgba(0, 0, 0, 0.5);
  }

  .dark .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), /* Darker for dark mode */
                0 0 60px -15px rgba(0, 0, 0, 0.9);
  }

  /* Tailwind does not have a native way to apply custom properties in CSS, 
     so a custom class for backdrop color is used for the overall theme. */
  body {
    @apply bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 dark:from-gray-900 dark:to-black dark:via-gray-800;
  }
</style>

製品比較コンポーネント

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

開けるプレビュー

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