Produktvergleichskomponente
Produktvergleichskomponente mit minimalistischem/flachem Design, Farbschema in Erdtönen und mittlerer Komplexität für Dashboard-Zwecke mit Tailwind CSS. Die Komponente ist reaktionsschnell und unterstützt dunkles Design. Kein JavaScript.
HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Comparison</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-800 p-8">
<div class="container mx-auto bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Product Comparison</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<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>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product C</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$199.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$249.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$299.99</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Screen Size</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">13 inch</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">15 inch</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">14 inch</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Storage</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">512GB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">RAM</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">16GB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Battery Life</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10 hours</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">12 hours</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">11 hours</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Verwandte Komponenten
Produktvergleichskomponente - Neumorphism Monochromatic
Eine reaktionsschnelle Produktvergleichskomponente mit einem neumorphen Designstil und einem monochromen Farbschema, geeignet für Event-/Konferenz-Websites. Inklusive Unterstützung für den Dunkelmodus.
Produktvergleichskomponente
Eine reaktionsschnelle Produktvergleichskomponente mit Unterstützung für dunkle Themen, mit einem minimalistischen/flachen Design und einem pastellfarbenen Farbschema. Diese komplexe Komponente eignet sich für Dashboards und ermöglicht es Benutzern, mehrere Produkte mit detaillierten Spezifikationen und interaktiven Elementen zu vergleichen.
Produktvergleichskomponente - Krypto
Eine reaktionsschnelle Produktvergleichskomponente mit einem Luxus-/Premium-Design, Süßigkeiten-/Süßigkeiten-Farbschema, zugeschnitten auf Kryptowährungs-/Blockchain-Anwendungen. Bietet Unterstützung für den Dunkelmodus, elegante Typografie und Platzhalterdaten.