Produktvergleichskomponente - Krypto

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