Brutalismus Produktvergleichskomponente

<div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
  <div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
    <h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
      APPOINTMENT SELECTION MATRIX
    </h1>

    <!-- Comparison Table Header -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
    </div>

    <!-- Comparison Rows -->
    <div class="space-y-4">

      <!-- Feature Row 1 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Duration</div>
        <div class="text-lg p-2 text-center">30 min</div>
        <div class="text-lg p-2 text-center">60 min</div>
        <div class="text-lg p-2 text-center">90 min</div>
      </div>

      <!-- Feature Row 2 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Consultation</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 3 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Priority Support</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 4 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Follow-up</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 5 (Image Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Resource Access</div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
        </div>
      </div>

      <!-- Feature Row 6 (Avatar Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Dedicated Agent</div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
      </div>

    </div>

    <!-- Action Buttons / Prices -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
      <div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
        <span class="text-3xl lg:text-4xl">$49</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
        <span class="text-3xl lg:text-4xl">$99</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
        <span class="text-3xl lg:text-4xl">$149</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
    </div>

    <div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <p class="mb-2">*All prices are subject to change without notice.</p>
      <p>Booking slots are limited. Secure your appointment now.</p>
    </div>

  </div>
</div>