Corporate/Professional Fashion/Beauty Gallery
A clean, trustworthy, and responsive image gallery component suitable for corporate fashion and beauty brands, featuring a triadic color scheme and dark mode support.
HTML Code
<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>Related Components
Gallery Component
A responsive gallery component with a 3D design style, featuring depth and engagement through shadow and hover effects. It supports dark and light themes.
JewelTone_Photography_Gallery
A complex, responsive photography gallery component with jewel tone colors and a clean, typographic layout, featuring grid systems and dark mode support. Ideal for photographer portfolios.
Skeuomorphic Crypto Gallery
A complex skeuomorphic gallery component designed for cryptocurrency and blockchain applications, featuring complementary colors, responsiveness, and dark mode support. It mimics real-world elements like recessed buttons and embossed frames.