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

Product Gallery 구성 요소

Glassmorphism으로 디자인된 반응형 제품 갤러리 구성 요소로, 흐림 효과와 보색 구성표가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 여기에는 다크 모드를 지원하는 전자 상거래에 적합한 여러 대화형 요소가 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
    <h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
            <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
            <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
            <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
            <p class="text-gray-600 dark:text-gray-300">$59.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="mt-10 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

관련 구성 요소

사이버펑크 제품 갤러리

사이버펑크 미학을 가미한 반응형 제품 갤러리 구성 요소로, 어두운 배경, 밝은 액센트 색상(일렉트릭 블루) 및 미묘한 인터랙티브 요소를 특징으로 하며, 제품 또는 포트폴리오를 선보이는 데 적합합니다.

열다

Product Gallery 구성 요소

미묘한 마이크로 인터랙션, 파스텔 색상 구성표 및 완전한 다크 모드 지원으로 설계된 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합합니다. 대화형 이미지 선택 및 자세한 제품 정보를 제공합니다.

열다

Product Gallery 구성 요소

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

열다