구성 요소 제품 갤러리 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 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Product Gallery 구성 요소

Watercolor_Artistic_Dating_Product_Gallery

Product Gallery 구성 요소