전자상거래 제품 갤러리
전자 상거래를 위한 미니멀하고 반응이 빠른 제품 갤러리 구성 요소로, 바다/파란색 톤, 다크 모드 지원 및 대화형 이미지 디스플레이를 특징으로 합니다.
HTML 코드
<div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
Featured Products
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
갤러리 구성 요소
소셜 미디어 목적을 위해 스큐어모피즘 디자인, 파스텔 색 구성표 및 중간 정도의 복잡성과 함께 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소입니다. 다크 모드 지원이 포함되며 이미지에는 picsum.photos를, 아바타에는 randomuser.me 를 사용합니다.
예약을 위한 미니멀리스트 세피아 이미지 갤러리
따뜻한 세피아/브라운 톤의 미니멀하고 평평한 디자인의 이미지 갤러리 구성 요소로, 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.
갤러리 구성 요소
Tailwind CSS를 사용하는 간단한 갤러리 구성 요소로, 트라이어딕 색 구성표로 Brutalism 디자인 스타일을 구현하고 작업 또는 제품을 선보이기 위한 어두운 테마 지원을 구현합니다.