CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Produktvergleichskomponente

Produktvergleichskomponente

Eine einfache, spielerische Produktvergleichskomponente in Herbstfarben, die sich für Dokumentationen oder Wiki-Seiten eignet. Verfügt über abgerundete Elemente, volle Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 lg:p-8 bg-orange-50 dark:bg-stone-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-200 mb-2">Compare Our Fun Features!</h2>
      <p class="text-orange-600 dark:text-orange-300 text-base sm:text-lg">See how our playful products stack up.</p>
    </div>

    <div class="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-orange-200 dark:divide-stone-700">

      <!-- Product 1 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center">
        <h3 class="text-xl sm:text-2xl font-bold text-orange-700 dark:text-orange-300 mb-4">Happy Widget 🥳</h3>
        <img src="https://picsum.photos/300/200?random=1" alt="Happy Widget" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">
        
        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Simple Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Playful Interface</li>
          <li class="flex items-center justify-center"><span class="text-red-500 mr-2 text-lg">&#10007;</span> Advanced Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Friendly Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 mb-6">$19<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-orange-500 text-white font-semibold rounded-full shadow-lg hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition duration-300 ease-in-out">Choose Happy!</a>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center bg-orange-50 dark:bg-stone-700">
        <h3 class="text-xl sm:text-2xl font-bold text-burgundy-900 dark:text-burgundy-100 mb-4">Super Gizmo ✨</h3>
        <img src="https://picsum.photos/300/200?random=2" alt="Super Gizmo" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">

        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Quick Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Robust Interface</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Powerful Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Premium Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-burgundy-900 dark:text-burgundy-100 mb-6">$39<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-burgundy-600 text-white font-semibold rounded-full shadow-lg hover:bg-burgundy-700 focus:outline-none focus:ring-4 focus:ring-burgundy-300 dark:focus:ring-burgundy-700 transition duration-300 ease-in-out">Get Gizmo Fun!</a>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700 border-t border-orange-200 dark:border-stone-600">
      <p class="text-orange-700 dark:text-orange-300 text-sm sm:text-base">Need more details? Check out our <a href="#" class="font-semibold underline hover:text-orange-800 dark:hover:text-orange-200">full feature list</a>!</p>
    </div>

  </div>
</div>

Verwandte Komponenten

Produktvergleichskomponente

Eine einfache, reaktionsschnelle Produktvergleichskomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Zeigt Produktnamen, Funktionen und Preise zum Vergleich an.

Offen

Produktvergleichskomponente für Neumorphismen

Eine einfache, reaktionsschnelle Produktvergleichskomponente im Neumorphism-Stil mit Erdtönen, Unterstützung für dunkle Themen und ohne JavaScript.

Offen

Produktvergleichskomponente

Eine verspielte und freundliche Produktvergleichskomponente für Sport-/Fitnessprodukte mit warmen Neutraltönen, abgerundeten Elementen und responsivem Design mit Unterstützung des Dunkelmodus.

Offen