Product Gallery 구성 요소
Tailwind CSS를 사용하는 반응형 제품 갤러리 구성 요소로, 뉴모픽 디자인 스타일, 보색 구성표 및 비즈니스 웹 사이트에 적합한 복잡한 레이아웃이 있습니다. 다크 모드 지원이 포함되며 picsum.photos의 이미지를 사용합니다.
HTML 코드
<div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
<!-- Product Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
<button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
/* Custom Neumorphic Shadows */
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
}
</style>
관련 구성 요소
Product Gallery 구성 요소
소셜 미디어에 적합한 파스텔 색 구성표와 함께 잔인함 스타일로 디자인된 반응형 제품 갤러리 구성 요소입니다. 높은 대비, 대담한 디자인 요소가 특징이며 다크 모드에 최적화되어 있습니다.
Product Gallery 구성 요소
Glassmorphism 디자인 스타일의 반응형 제품 갤러리 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 제품 이미지와 사용자 아바타를 선보입니다.