갤러리

갤러리 구성 요소

전자 상거래를 위한 Glassmorphism 디자인, 유사한 색 구성표, 복잡한 레이아웃 및 어두운 테마 지원을 제공하는 반응형 갤러리 구성 요소입니다.

                <div class="bg-gradient-to-br from-purple-100 via-purple-200 to-pink-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-purple-800 dark:text-purple-300 mb-12 drop-shadow-lg">Product Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 1</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">A short description of the product, highlighting its key features.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-bold text-purple-900 dark:text-purple-100">$99.99</span>
            <span class="text-sm text-purple-700 dark:text-purple-300 line-through">$120.00</span>
          </div>
          <div class="flex space-x-2 text-purple-700 dark:text-purple-300 mb-4">
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-gray-400">★</span>
            <span>(4.5 stars)</span>
          </div>
          <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">Add to Cart</button>
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 z-0"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/238/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 2</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">Another great product with amazing features and benefits you\

갤러리 구성 요소

레트로/빈티지에서 영감을 받은 갤러리 구성 요소로, 생생한 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. 콘텐츠 소비를 위해 설계되었습니다.

미리보기 열기

                <div class="container mx-auto p-4 font-sans">

  <!-- Retro/Vintage Header -->
  <header class="text-center mb-8">
    <h1 class="text-5xl font-extrabold text-blue-700 dark:text-blue-300 mb-2 uppercase tracking-wide">The VINTAGE Gallery</h1>
    <p class="text-xl text-yellow-600 dark:text-yellow-400">A Glimpse into the Past, Vibrant as Ever</p>
  </header>

  <!-- Gallery Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Gallery Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/seed/vintage1/400/300" alt="Vintage Camera" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Classic Capture</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Retro Car" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Ride in Style</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/seed/vintage3/400/300" alt="Old Radio" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Broadcast Blasts</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Vinyl Record" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Spinning Tunes</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

  </div>

  <!-- About Section (Moderate Complexity) -->
  <section class="mt-12 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-4 border-blue-500 dark:border-blue-600">
    <h2 class="text-4xl font-bold text-blue-700 dark:text-blue-300 mb-6 text-center">About Our Collection</h2>
    <div class="flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-8">
      <div class="md:w-1/2">
        <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4">
          Step back in time with our curated collection of vintage and retro-inspired imagery. Each piece is selected to evoke nostalgia and a sense of timeless charm. We believe in vibrant storytelling through visual experiences.
        </p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Curator Avatar" class="w-16 h-16 rounded-full border-4 border-yellow-500">
          <div>
            <p class="font-bold text-red-600 dark:text-red-400">Jane Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Chief Curator</p>
          </div>
        </div>
      </div>
      <div class="md:w-1/2">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Authentic Retro Aesthetics</li>
          <li>High-Quality Digital Renders</li>
          <li>Optimized for Blog/Content Integration</li>
          <li>Fully Responsive Design</li>
          <li>Dark Mode Ready</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center mt-12 p-4 text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Vintage Vibes Gallery. All rights reserved.</p>
  </footer>

</div>

갤러리 구성 요소

glassmorphism 효과, 생생한 색상 및 어두운 테마 지원을 제공하는 반응형 갤러리 구성 요소로, 대시보드에 적합합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>

갤러리 구성 요소

머티리얼 디자인 스타일의 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소로, 어두운 테마를 지원하는 대시보드에 적합합니다.

미리보기 열기

                <div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
        </div>
        
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
        </div>
        
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
        </div>
        
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
        </div>
        
        <!-- More cards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
        </div>
    </div>
</div>

갤러리 구성 요소

소셜 미디어 목적을 위해 스큐어모피즘 디자인, 파스텔 색 구성표 및 중간 정도의 복잡성과 함께 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소입니다. 다크 모드 지원이 포함되며 이미지에는 picsum.photos를, 아바타에는 randomuser.me 를 사용합니다.

미리보기 열기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
     <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

갤러리 구성 요소

3D 디자인, 유사한 색 구성표 및 소셜 미디어 인터페이스를 위한 다크 모드를 지원하는 반응형 갤러리 구성 요소.

미리보기 열기

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

전자상거래 제품 갤러리

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

미리보기 열기

                <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>

카테고리