LuxeComparaison de produits
Un composant de comparaison de produits de luxe et haut de gamme pour les articles de mode/beauté, avec un design élégant, une typographie sophistiquée et une palette de couleurs sourdes/désaturées avec une réactivité totale et une prise en charge du mode sombre.
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>Composants associés
Brutalisme Comparaison de produits Composant
Un composant de comparaison de produits de style brutaliste conçu pour les systèmes de réservation, avec une palette de couleurs forêt/vert, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.
Composant de comparaison de produits
Un composant de comparaison de produits simple et réactif avec un design glassmorphism, une palette de couleurs de terre et une prise en charge du mode sombre. Il affiche deux fiches produits côte à côte sur des écrans plus grands et empilées sur des écrans plus petits.
Composant de comparaison de produits
Un composant réactif de comparaison de produits avec des éléments de conception de type 3D, la prise en charge du thème sombre et l’intégration d’images de remplacement pour la visualisation des produits et les avatars des utilisateurs à l’aide de picsum.photos et randomuser.me.