기업/프로페셔널 패션/뷰티 갤러리
기업 패션 및 뷰티 브랜드에 적합한 깨끗하고 신뢰할 수 있으며 반응이 빠른 이미지 갤러리 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 합니다.
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>관련 구성 요소
JewelTone_Photography_Gallery
보석 색조 색상과 깔끔한 타이포그래피 레이아웃이 있는 복잡하고 반응이 빠른 사진 갤러리 구성 요소로, 그리드 시스템과 다크 모드를 지원합니다. 사진작가 포트폴리오에 적합합니다.
예약을 위한 미니멀리스트 세피아 이미지 갤러리
따뜻한 세피아/브라운 톤의 미니멀하고 평평한 디자인의 이미지 갤러리 구성 요소로, 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.
레트로 갤러리 컴포넌트
레트로/빈티지 스타일, 생생한 색 구성표, 블로그/콘텐츠 소비를 위한 간단한 레이아웃을 갖춘 반응형 갤러리 구성 요소이며 다크 모드를 지원합니다. Tailwind CSS를 사용합니다.