전자상거래 제품 갤러리
전자 상거래를 위한 미니멀하고 반응이 빠른 제품 갤러리 구성 요소로, 바다/파란색 톤, 다크 모드 지원 및 대화형 이미지 디스플레이를 특징으로 합니다.
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>관련 구성 요소
갤러리 구성 요소
레트로/빈티지에서 영감을 받은 갤러리 구성 요소로, 생생한 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. 콘텐츠 소비를 위해 설계되었습니다.
Event_Gallery_Component
이벤트 및 컨퍼런스 웹 사이트를 위한 반응형 갤러리 구성 요소로, 보석 색조, 색상 그라디언트, 부드러운 전환 및 다크 모드 지원을 제공합니다. 이벤트 하이라이트 또는 발표자 이미지를 시각적으로 매력적인 그리드로 표시합니다.
장난기 넘치는 날씨 갤러리 구성 요소
날씨 또는 기후 데이터를 위한 반응형이고 재미있는 갤러리 구성 요소로, 둥근 요소, 차분한 색상 및 다크 모드 지원을 특징으로 합니다. 설명과 함께 날씨 관련 이미지를 표시합니다.