Produktvergleichskomponente
Eine skeuomorphe Produktvergleichskomponente, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.
HTML-Code
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-full md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
</div>
</div>
<div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
</div>
</div>
</div>Verwandte Komponenten
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.
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.
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.