Galleria Moda/Bellezza Corporate/Professionale
Un componente della galleria di immagini pulito, affidabile e reattivo, adatto ai marchi di moda e bellezza aziendali, con una combinazione di colori triadica e il supporto della modalità scura.
Codice HTML
<section class="py-12 bg-indigo-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold mb-4 text-indigo-800 dark:text-indigo-400">Our Latest Collection</h2>
<p class="text-lg leading-relaxed max-w-2xl mx-auto text-gray-600 dark:text-gray-400">Explore our exquisite range of fashion and beauty essentials, curated with elegance and precision for the modern individual.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Gallery Item 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1012/600/400" alt="Fashion Model" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Spring Elegance Dress</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">A timeless piece designed for ultimate comfort and style.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$120</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Discover the perfect blend of modern design and classic appeal.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1015/600/400" alt="Beauty Product" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Radiant Glow Serum</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Achieve glowing skin with our specially formulated serum.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$45</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Infused with natural extracts to revitalize and nourish your complexion.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1018/600/400" alt="Accesory" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Luxury Leather Bag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Crafted from premium leather, a statement of true sophistication.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$280</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Perfect for every occasion, combining elegance with practical design.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1020/600/400" alt="Cosmetic" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Velvet Matte Lipstick</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Intensely pigmented for a rich, long-lasting matte finish.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$25</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Experience a smooth application and vivid color that stays all day.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1025/600/400" alt="Footwear" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Elegant Pointed Heels</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Sophistication meets comfort in these meticulously crafted heels.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$95</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Step out in confidence with our latest collection of chic footwear.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1033/600/400" alt="Skincare" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Hydrating Face Mask</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Rejuvenate your skin with our deeply hydrating and nourishing mask.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$30</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Pamper your skin with a rich blend of essential vitamins and minerals.</p>
</div>
</div>
<!-- Gallery Item 7 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1041/600/400" alt="Jewelry" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Dazzling Diamond Necklace</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">A sparkling statement piece, perfect for any special occasion.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$350</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Add a touch of brilliance to your ensemble with this exquisite design.</p>
</div>
</div>
<!-- Gallery Item 8 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1043/600/400" alt="Fragrance" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Sophisticated Eau de Parfum</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">An enchanting blend of notes, capturing timeless elegance.</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$85</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Leave a lasting impression with this luxurious and captivating scent.</p>
</div>
</div>
</div>
</div>
</section>Componenti correlati
Galleria criptomorfa skeuomorfa
Un complesso componente di galleria scheumorfica progettato per applicazioni di criptovaluta e blockchain, con colori complementari, reattività e supporto per la modalità oscura. Imita elementi del mondo reale come i pulsanti incassati e le cornici in rilievo.
Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con lo stile Material Design, adatto per una dashboard con supporto per temi scuri.
Componente Galleria
Componente Galleria reattiva con design 3D, combinazione di colori analoga e supporto della modalità oscura per le interfacce dei social media.