CCHub Logo CCHub Tailwind Collection
구성 요소 갤러리 갤러리 구성 요소

갤러리 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

갤러리 구성 요소

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

열다

Brutalist Gallery 구성 요소

엔터테인먼트 플랫폼을 위한 반응형의 브루탈리즘에서 영감을 받은 갤러리 구성 요소로, 고대비, 쿨 뉴트럴 및 다크 모드 지원을 특징으로 합니다.

열다

갤러리 구성 요소

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

열다