CCHub Logo CCHub Tailwind Collection
구성 요소 제품 갤러리 Product Gallery 구성 요소

Product Gallery 구성 요소

다크 모드 UI용으로 설계된 반응형 제품 갤러리 구성 요소로, 소셜 미디어 네트워킹 인터페이스에 적합한 보색을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 1</h3>
                <p class="text-gray-300">Description of product 1 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by John Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 2</h3>
                <p class="text-gray-300">Description of product 2 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Jane Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 3</h3>
                <p class="text-gray-300">Description of product 3 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Alex Smith</span>
                </div>
            </div>
        </div>
        <!-- Additional Product Items can go here -->
    </div>
</div>

관련 구성 요소

Product Gallery 구성 요소

스큐어모픽 디자인, 단색 색 구성표 및 어두운 테마 지원을 갖춘 반응형 제품 갤러리 구성 요소로, Tailwind CSS로 구축되었습니다. 블로그 및 콘텐츠 소비에 적합한 간단한 레이아웃이 특징이며 미묘한 그림자와 그라디언트로 실제 요소를 모방합니다.

열다

Product Gallery 구성 요소

어두운 UI, 세피아/갈색 색 구성표가 있는 반응형 제품 갤러리 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 이미지, 제목, 설명 및 가격이 포함된 여러 제품 카드를 포함하며 다크 모드를 지원합니다.

열다

Product Gallery 구성 요소

레트로/빈티지 스타일의 반응형 제품 갤러리로, 보색 구성표가 특징이며 다크 모드를 지원하는 비즈니스/기업 웹사이트용으로 설계되었습니다.

열다