LussoProdottoConfronto
Un componente di confronto di prodotti di lusso e premium per articoli di moda/bellezza, caratterizzato da un design elegante, una tipografia sofisticata e una combinazione di colori tenui/desaturati con reattività completa e supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Skeuomorphic_Product_Comparison_Component
Un componente di confronto dei prodotti semplice e reattivo con un design scheumorfico che utilizza una combinazione di colori blu scuro monocromatica, adatto per applicazioni di dashboard. Include il supporto per la modalità oscura.
Brutalismo Componente di confronto dei prodotti
Un componente di confronto dei prodotti in stile brutalista progettato per i sistemi di prenotazione, caratterizzato da una tavolozza di colori foresta/verde, contrasto elevato e layout insoliti. È completamente reattivo e supporta la modalità oscura.
Componente di confronto dei prodotti
Un componente di confronto dei prodotti semplice e reattivo con un design glassmorphism, una combinazione di colori del tono della terra e il supporto della modalità scura. Visualizza due schede prodotto affiancate su schermi più grandi e impilate su schermi più piccoli.