Product Gallery 구성 요소
어두운 UI, 세피아/갈색 색 구성표가 있는 반응형 제품 갤러리 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 이미지, 제목, 설명 및 가격이 포함된 여러 제품 카드를 포함하며 다크 모드를 지원합니다.
HTML 코드
<section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
Our Premium Collection
</h2>
<p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
Discover exquisitely crafted products designed with passion and precision.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
<div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
<span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
<div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
View All Products
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</section>관련 구성 요소
Product Gallery 구성 요소
glassmorphism 디자인 스타일, 밝은 액센트가 있는 흑백 색 구성표를 갖춘 간단하고 반응이 빠른 제품 갤러리 구성 요소로 구인 게시판 또는 경력 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
Product Gallery 구성 요소
Glassmorphism으로 디자인된 반응형 제품 갤러리 구성 요소로, 흐림 효과와 보색 구성표가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 여기에는 다크 모드를 지원하는 전자 상거래에 적합한 여러 대화형 요소가 포함되어 있습니다.
Product Gallery 구성 요소
소셜 미디어에 적합한 파스텔 색 구성표와 함께 잔인함 스타일로 디자인된 반응형 제품 갤러리 구성 요소입니다. 높은 대비, 대담한 디자인 요소가 특징이며 다크 모드에 최적화되어 있습니다.