CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Produktvergleichskomponente

Produktvergleichskomponente

Eine einfache Produktvergleichskomponente, die für die Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema entwickelt wurde. Es verfügt über ein grundlegendes Layout mit minimalen Elementen, ideal für Blog-Inhalte und Lesezwecke.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-xl font-bold mb-4">Product Comparison</h2>
    <table class="min-w-full">
        <thead>
            <tr class="bg-gray-700">
                <th class="px-4 py-2">Feature</th>
                <th class="px-4 py-2">Product A</th>
                <th class="px-4 py-2">Product B</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Price</td>
                <td class="px-4 py-2">$199</td>
                <td class="px-4 py-2">$249</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Rating</td>
                <td class="px-4 py-2">⭐⭐⭐⭐</td>
                <td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Warranty</td>
                <td class="px-4 py-2">1 Year</td>
                <td class="px-4 py-2">2 Years</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Image</td>
                <td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
                <td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
            </tr>
        </tbody>
    </table>
    <div class="flex justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
            <span class="ml-2">Reviewed by John Doe</span>
        </div>
        <a href="#" class="text-blue-400 hover:underline">Read More</a>
    </div>
</div>

Verwandte Komponenten

LuxusProduktVergleich

Eine Luxus- und Premium-Produktvergleichskomponente für Mode-/Schönheitsartikel mit elegantem Design, anspruchsvoller Typografie und einem gedämpften/entsättigten Farbschema mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Cyberpunk-Produktvergleichskomponente

Eine einfache, futuristische Produktvergleichskomponente für Event-/Konferenz-Websites mit dunklem Hintergrund, kühlen neutralen Farben und Neonakzenten für eine Cyberpunk-Ästhetik. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

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