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

Brutalist Gallery 구성 요소

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

미리 보기

HTML 코드 

<div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 sm:mb-12 text-gray-900 dark:text-gray-50 border-b-4 border-gray-900 dark:border-gray-50 pb-4 tracking-tighter uppercase">
      <span class="block">The Vault</span>
      <span class="block text-2xl sm:text-3xl md:text-4xl font-light normal-case">A Gallery of Visual Noise</span>
    </h1>

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

      <!-- Gallery Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1018/600/400" alt="Abstract Visual" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Dystopian Horizon</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw exploration of forgotten landscapes, echoing the solitude of derelict futures. Captured with a stark, unforgiving lens.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Project
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1043/600/400" alt="Geometric Composition" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Concrete Echoes</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Harsh light and deep shadows define this urban series, a tribute to the monumental structures that shape our existence.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Explore More
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">4K</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1069/600/400" alt="Industrial Abstraction" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">System Failure</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw glimpse into the gears and conduits of a collapsing system. Beauty in the breakdown, stark and unyielding.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            See Portfolio
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">NEW</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1080/600/400" alt="Monolithic Structure" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Urban Decay</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Unflinching views of abandoned spaces, where rust and resilience tell stories of cycles lost and found.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Collection
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1084/600/400" alt="Gritty Texture" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Raw Data</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Bare, unadorned visuals stripping away veneer to reveal the harsh truth beneath. A digital deconstruction.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Download Raws
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">LIVE</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1049/600/400" alt="Minimalist Concrete" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Oblivion Walls</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Exploring the vast indifference of stark, unyielding architecture. A commentary on human scale in colossal spaces.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Series
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">VR</div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button type="button" class="bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-4 border-gray-900 dark:border-gray-50 py-3 px-8 text-lg sm:text-xl font-bold uppercase tracking-wider shadow-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-300">
        Load More Chaos
      </button>
    </div>

  </div>

</div>

관련 구성 요소

전자상거래 제품 갤러리

전자 상거래를 위한 미니멀하고 반응이 빠른 제품 갤러리 구성 요소로, 바다/파란색 톤, 다크 모드 지원 및 대화형 이미지 디스플레이를 특징으로 합니다.

열다

갤러리 구성 요소

3D 디자인 스타일의 반응형 갤러리 구성 요소로, 그림자 및 호버 효과를 통해 깊이와 몰입도를 제공합니다. 어둡고 밝은 테마를 지원합니다.

열다

3D_Muted_Gallery_Component

3D 디자인 미학, 차분한 색 구성표 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 갤러리 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.

열다