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

Product Gallery 구성 요소

레트로/빈티지 미학을 가미한 반응형 제품 갤러리로, 다크 모드를 지원합니다. 여기에는 플레이스홀더 서비스에서 생성된 이미지와 아바타가 포함됩니다.

미리 보기

HTML 코드 

<div class="max-w-7xl mx-auto p-8">
    <h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</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-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</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-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</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-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Product Gallery 구성 요소

브루탈리즘 디자인, 회색조 색 구성표 및 적당한 복잡성을 가진 제품 갤러리 구성 요소입니다. 대시보드 목적으로 설계되었으며 어두운 테마 지원으로 반응합니다.

열다

럭셔리단색제품갤러리

단색 색 구성표가 있는 단순하고 우아한 제품 갤러리 구성 요소로, 음악/오디오 플랫폼용으로 설계되었습니다. 완전한 반응성과 다크 모드 지원이 특징입니다.

열다

Product Gallery 구성 요소

3D 디자인 미학과 세피아/갈색 색상 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 여러 대화형 요소와 다크 모드 지원이 포함됩니다.

열다