검색 구성 요소

카테고리

갤러리

여러 이미지를 표시하기 위한 구성 요소

전자상거래 제품 갤러리

복잡하고 반응이 빠르며 어두운 테마와 호환되는 갤러리 구성 요소로, 미니멀한 디자인, 보색적인 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있습니다.

                <div class="dark:bg-gray-900 dark:text-white min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$29.50</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$45.00</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>Out of Stock</span>
          </div>
        </div>
      </div>
      
      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 4</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$15.75</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Add more product cards as needed -->

    </div>

    <!-- Pagination/Load More (Example) -->
    <div class="flex justify-center mt-8">
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">Load More</button>
    </div>

  </div>
</div>

갤러리 구성 요소

Tailwind CSS를 사용하는 간단한 갤러리 구성 요소로, 트라이어딕 색 구성표로 Brutalism 디자인 스타일을 구현하고 작업 또는 제품을 선보이기 위한 어두운 테마 지원을 구현합니다.

열다 미리 보기

                <div class="bg-gray-800 dark:bg-gray-900 p-6">
    <h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

갤러리 구성 요소

소셜 미디어를 위한 마이크로 인터랙션이 있는 반응형 갤러리 구성 요소로, Tailwind CSS를 사용하여 어두운 테마와 간단한 레이아웃으로 설계되었습니다.

열다 미리 보기

                <div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">John Doe</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Jane Smith</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Michael Johnson</span>
                </div>
            </div>
        </div>
        <!-- Repeat as necessary for more images -->
    </div>
</div>

갤러리 구성 요소

다크 모드를 지원하는 반응형 갤러리 구성 요소

열다 미리 보기

                
<div class="bg-gray-100 dark:bg-gray-900 py-8">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Gallery</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            <!-- Gallery Item 1 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 1</p>
                </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 2</p>
                </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 3</p>
                </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 4</p>
                </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 5</p>
                </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 6</p>
                </div>
            </div>
        </div>
    </div>
</div>

3D 갤러리 구성 요소

전자 상거래를 위해 설계된 복잡한 반응형 3D 갤러리 구성 요소로, 어두운 테마와 보색이 특징입니다.

열다 미리 보기

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
                <button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
                <button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
                <button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
                <button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
                <button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

갤러리 구성 요소

블로그/콘텐츠 목적을 위해 흙색을 사용한 Neumorphism 스타일의 갤러리 구성 요소. 이 구성 요소는 여러 대화형 요소, 반응형 디자인 및 어두운 테마 지원이 포함된 풍부한 인터페이스를 제공합니다.

열다 미리 보기

                <div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>  </div>  <div class="mt-6 text-center">    <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24">    <p class="text-gray-600 dark:text-gray-400">Author Name</p>  </div></div>

Skeuomorphism Grayscale Gallery 컴포넌트

스큐어모피즘 디자인, 그레이스케일 색 구성표 및 소셜 미디어를 위한 복잡한 레이아웃을 갖춘 반응형 사진 갤러리. 어두운 테마 지원이 포함됩니다.

열다 미리 보기

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Photo Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Gallery Item 1 -->
      <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Image Title</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">3 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 2 (Repeat structure for more items) -->
        <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Image Title</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">5 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 3 (Repeat structure for more items) -->
       <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Peter Jones</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My Travel Photo</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">8 Likes</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

레트로 갤러리 컴포넌트

레트로/빈티지 스타일, 생생한 색 구성표, 블로그/콘텐츠 소비를 위한 간단한 레이아웃을 갖춘 반응형 갤러리 구성 요소이며 다크 모드를 지원합니다. Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="bg-gray-200 dark:bg-gray-800 p-6">  <div class="container mx-auto">    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2>    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>    </div>  </div></div>

갤러리 구성 요소

Material Design에서 대시보드 용도로 유사한 색 구성표를 사용하여 디자인된 반응형 갤러리 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 1.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 2.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 3.</p>
            </div>
        </div>
        <!-- Repeat more images as needed -->
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">User Avatars</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4" class="rounded-full">
            </div>
            <!-- Repeat more avatars as needed -->
        </div>
    </div>
</div>

갤러리 구성 요소

블로그 또는 콘텐츠 소비를 위해 설계된 브루탈리즘 스타일의 갤러리 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.

열다 미리 보기

                <div class="p-5 bg-gray-100 dark:bg-gray-900">
    <h1 class="text-3xl text-gray-800 dark:text-gray-200 font-bold mb-4">Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=1" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 1</h2>
            <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=2" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 2</h2>
            <p class="text-gray-700 dark:text-gray-300">Vivamus lacinia odio vitae vestibulum. Praesent feugiat amet et ligula.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=3" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 3</h2>
            <p class="text-gray-700 dark:text-gray-300">Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=4" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 4</h2>
            <p class="text-gray-700 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=5" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 5</h2>
            <p class="text-gray-700 dark:text-gray-300">At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=6" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 6</h2>
            <p class="text-gray-700 dark:text-gray-300">Mollitia animi, id est laborum et dolorum fuga. Et harum quidem.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=7" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 7</h2>
            <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=8" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 8</h2>
            <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
        </div>
    </div>
</div>