CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich RetroVintageProduktvergleich

RetroVintageProduktvergleich

Retro/Vintage-Produktvergleichskomponente für das Dashboard. Einfaches, monochromatisches Design mit Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</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-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Verwandte Komponenten

EarthyProductComparison

Eine reaktionsschnelle Produktvergleichskomponente für den E-Commerce mit drei Produktkarten. Gestylt mit Tailwind CSS unter Verwendung eines Erdton-Farbschemas (Braun-, Grün- und Bernsteintöne) und einfacher 3D-Designelemente wie Schatten und Akzentleisten für Tiefe und Engagement. Enthält Unterstützung für den Dunkelmodus und verwendet Platzhalterbilder von picsum.photos.

Offen

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.

Offen

Produktvergleichskomponente - Immobilien (Papier-/Druck-inspiriert)

Eine einfache, von Papier und Druck inspirierte Produktvergleichskomponente für Immobilienangebote mit zwei Immobilien. Verwendet violette/violette Töne und unterstützt den Dunkelmodus.

Offen