CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Produktvergleichskomponente

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.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Product 1 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
        </ul>
        <div class="text-2xl font-bold text-center">$49/m</div>
      </div>
      
      <!-- Product 2 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Beta</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
        </ul>
        <div class="text-2xl font-bold text-center">$79/m</div>
      </div>
      
      <!-- Product 3 -->
      <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
        <ul class="text-gray-400 mb-6">
          <li class="mb-2">Feature A</li>
          <li class="mb-2">Feature B</li>
          <li class="mb-2">Feature C</li>
          <li>Feature D</li>
          <li>Feature E</li>
          <li>Feature F</li>
        </ul>
        <div class="text-2xl font-bold text-center">$99/m</div>
      </div>
      
    </div>
  </div>
</div>

Verwandte Komponenten

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 komplexe Produktvergleichskomponente, die nach den Prinzipien des Materialdesigns entwickelt wurde und sich durch ein lebendiges Farbschema und Unterstützung für den Dunkelmodus auszeichnet. Ideal für Social-Media-Netzwerkschnittstellen.

Offen

Produktvergleichskomponente - Cyberpunk Retro Charity

Eine einfache, reaktionsschnelle Produktvergleichskomponente, die mit einer Cyberpunk-Ästhetik unter Verwendung einer Retro-/Vintage-Farbpalette entworfen wurde und für gemeinnützige/wohltätige Organisationen gedacht ist. Bietet Unterstützung für den Dunkelmodus und ein sauberes, minimalistisches Layout.

Offen