Produktvergleichskomponente
Eine verspielte und fröhliche Produktvergleichskomponente mit abgerundeten Elementen und einem komplementären Farbschema, geeignet für ein Dashboard. Verfügt über responsives Design und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Product 1 Card -->
<div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
</div>
<h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
<ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Super Speedy Performance</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Unlimited Whimsical Widgets</li>
<li class="flex items-center"><span class="text-red-500 mr-2">✗</span> No Unicorn Mode</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Friendly Support Sprites</li>
</ul>
<div class="text-center mt-6">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
Choose Alpha!
</button>
</div>
</div>
<!-- Product 2 Card -->
<div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
</div>
<h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
<ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
<li class="flex items-center"><span class="text-red-500 mr-2">✗</span> Standard Speed</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Dazzling Gimmicks Included</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Exclusive Unicorn Mode</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Mythical Support Beings</li>
</ul>
<div class="text-center mt-6">
<button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
Select Beta!
</button>
</div>
</div>
</div>
</div>Verwandte Komponenten
Produktvergleichskomponente
Eine komplexe, reaktionsschnelle Produktvergleichskomponente mit 3D-Designelementen, einem triadischen Farbschema und Unterstützung des Dunkelmodus, die sich für einen Dashboard-Kontext eignet.
Produktvergleichskomponente - Aquarell/Künstlerisch
Eine komplexe, monochromatische Produktvergleichskomponente, die für den Einsatz in der Industrie/Fertigung entwickelt wurde und sich durch eine weiche, aquarellierte/künstlerische Ästhetik mit Unterstützung des Dunkelmodus auszeichnet. Ermöglicht es Benutzern, mehrere Produkte nebeneinander zu vergleichen.
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.