LuxuryProductComparison
A luxury and premium product comparison component for fashion/beauty items, featuring elegant design, sophisticated typography, and a muted/desaturated color scheme with full responsiveness and dark mode support.
HTML Code
<div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 rounded-xl shadow-2xl overflow-hidden">
<div class="p-6 sm:p-8 md:p-10 lg:p-12 border-b border-gray-100 dark:border-gray-800">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4 tracking-tight leading-tight">
Compare Our Luxurious Offerings
</h2>
<p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Discover the perfect choice for your discerning taste. Each product is crafted with unparalleled quality and elegance.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-px bg-gray-100 dark:bg-gray-800">
<!-- Comparison Item 1 -->
<div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
<div class="flex-shrink-0 mb-6">
<img src="https://picsum.photos/id/1018/300/200" alt="Elegant Silk Scarf" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Ethereal Silk Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm italic">A touch of pure sophistication.</p>
</div>
<ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>100% Charmeuse Silk</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Hand-rolled Edges</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Signature Print Design</span>
</li>
<li class="flex items-center text-base sm:text-lg text-gray-400 dark:text-gray-600 line-through">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Water-resistant Finish</span>
</li>
</ul>
<div class="mt-auto">
<p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>249</p>
<button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
Select Scarf
</button>
</div>
</div>
<!-- Comparison Item 2 -->
<div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
<div class="flex-shrink-0 mb-6">
<img src="https://picsum.photos/id/350/300/200" alt="Premium Leather Handbag" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Artisan Leather Tote</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Exquisite craftsmanship, timeless design.</p>
</div>
<ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Full-grain Italian Leather</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Hand-stitched Detailing</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Interior Silk Lining</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Water-resistant Finish</span>
</li>
</ul>
<div class="mt-auto">
<p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>1299</p>
<button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
Select Tote
</button>
</div>
</div>
<!-- Comparison Item 3 (Featured/Most Popular) -->
<div class="relative flex flex-col bg-indigo-50 dark:bg-indigo-950 p-6 sm:p-8 lg:p-10 ring-4 ring-indigo-500 dark:ring-indigo-600 rounded-xl transition-all duration-300 ease-in-out hover:shadow-xl dark:hover:shadow-xl-dark transform scale-100 md:scale-105 origin-bottom">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white text-xs sm:text-sm font-bold uppercase py-2 px-4 rounded-full shadow-lg whitespace-nowrap">
Most Popular
</div>
<div class="flex-shrink-0 mb-6 mt-6 sm:mt-4">
<img src="https://picsum.photos/id/405/300/200" alt="Haute Couture Dress" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Glimmering Evening Gown</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Unforgettable elegance for grand occasions.</p>
</div>
<ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Hand-embroidered Sequins</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Custom Tailoring Options</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Silken Chiffon Fabric</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Complimentary Stylist Session</span>
</li>
</ul>
<div class="mt-auto">
<p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>4999</p>
<button class="w-full py-3 px-6 rounded-lg bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5">
Choose Gown
</button>
</div>
</div>
<!-- Comparison Item 4 -->
<div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
<div class="flex-shrink-0 mb-6">
<img src="https://picsum.photos/id/80/300/200" alt="Precious Stone Necklace" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Solstice Gem Necklace</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm italic">Radiant beauty from nature's heart.</p>
</div>
<ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Ethically Sourced Emeralds</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>18K Gold Setting</span>
</li>
<li class="flex items-center text-base sm:text-lg">
<svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Adjustable Chain Length</span>
</li>
<li class="flex items-center text-base sm:text-lg text-gray-400 dark:text-gray-600 line-through">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Engraving Service</span>
</li>
</ul>
<div class="mt-auto">
<p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>1899</p>
<button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
Select Necklace
</button>
</div>
</div>
</div>
<div class="p-6 sm:p-8 md:p-10 lg:p-12 border-t border-gray-100 dark:border-gray-800 text-center">
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4">
Have questions or need assistance with your selection? Our dedicated concierge team is ready to help.
</p>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Contact Our Concierge
</a>
</div>
</div>
</div>Related Components
Product Comparison Component - Neumorphism Monochromatic
A responsive product comparison component with a neumorphic design style and a monochromatic color scheme, suitable for event/conference websites. Includes dark mode support.
Product Comparison Component
Minimalist/Flat Design, Grayscale color scheme, complex product comparison component for social media with responsive design and dark theme support.
Product Comparison Component
A skeuomorphic product comparison component designed with Tailwind CSS featuring responsive effects and dark theme support.