CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 Memphis_Grayscale_Photography_Layout

Memphis_Grayscale_Photography_Layout

Memphis Design에서 영감을 받은 회색조의 복잡하고 반응이 빠른 사진 레이아웃 구성 요소로, 사진 갤러리 및 포트폴리오에 적합하며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <header class="flex flex-col sm:flex-row justify-between items-center mb-8 sm:mb-12 p-4 border-b-4 border-black dark:border-white shadow-lg bg-neutral-200 dark:bg-neutral-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200 mb-4 sm:mb-0 transform -rotate-3 transition-transform duration-300 ease-in-out hover:rotate-0">
      GALLERY
    </h1>
    <nav class="flex flex-wrap gap-x-6 gap-y-2 text-xl font-semibold">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Portfolio</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">About</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Contact</a>
    </nav>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Featured Photographer Section -->
    <section class="md:col-span-3 lg:col-span-4 p-6 bg-gradient-to-br from-neutral-300 to-neutral-500 dark:from-neutral-700 dark:to-neutral-900 border-4 border-black dark:border-white shadow-xl flex flex-col sm:flex-row items-center justify-center relative overflow-hidden group">
      <div class="absolute top-0 left-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-top-left transform -translate-x-1/2 -translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-bottom-right transform translate-x-1/2 translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>

      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Photographer Profile" class="w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover border-4 border-black dark:border-white shadow-lg z-10 sm:mr-8 mb-6 sm:mb-0 transform hover:scale-110 transition-transform duration-300 ease-in-out">
      <div class="text-center sm:text-left z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-black dark:text-white mb-2 transform rotate-1 transition-transform duration-300 group-hover:rotate-0">Featured Artist: Jane Doe</h2>
        <p class="text-xl sm:text-2xl text-neutral-800 dark:text-neutral-200 font-semibold mb-4">Master of Monochrome</p>
        <a href="#" class="inline-block px-6 py-3 bg-black dark:bg-white text-white dark:text-black font-bold text-lg uppercase tracking-wider border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">View Profile</span>
        </a>
      </div>
    </section>

    <!-- Gallery Filters/Categories -->
    <section class="md:col-span-1 p-6 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 border-4 border-white dark:border-black shadow-lg transform translate-y-4 dark:translate-y-0 translate-x-4 dark:translate-x-0">
      <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Categories</h3>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Portraits</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Landscapes</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transitional-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Street</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Abstract</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Events</a></li>
      </ul>
      <div class="mt-8">
        <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Tools</h3>
        <input type="text" placeholder="Search photos..." class="w-full px-4 py-3 bg-neutral-800 dark:bg-neutral-200 text-neutral-100 dark:text-neutral-900 placeholder-neutral-400 dark:placeholder-neutral-600 border-2 border-white dark:border-black focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-black mb-4">
        <button class="w-full px-6 py-3 bg-white dark:bg-black text-black dark:text-white font-bold text-lg uppercase tracking-wide border-2 border-transparent hover:border-white dark:hover:border-black transition-all duration-300 relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">Apply Filters</span>
        </button>
      </div>
    </section>

    <!-- Photo Grid -->
    <section class="md:col-span-2 lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

      <!-- Photo Card 1 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Photo 1" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Urban Echoes</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A candid shot capturing the raw energy of city life.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 2 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1043/600/400" alt="Photo 2" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Mountain Serenity</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Clouds embrace the peaks in a timeless grayscale landscape.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 3 (Taller) -->
      <div class="row-span-1 sm:row-span-2 bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1025/600/800" alt="Photo 3" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Reflections of Time</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A pensive portrait, capturing depth and emotion in every shade.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 4 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1012/600/400" alt="Photo 4" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Open Road</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Vast plains and endless journeys, captured in monochrome.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 5 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/105/600/400" alt="Photo 5" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Abstract Light</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Play of shadows and light creating compelling forms.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 6 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1079/600/400" alt="Photo 6" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Coastal Whispers</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">The rugged beauty of the coast in stunning black and white.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

    </section>

  </main>

  <footer class="mt-12 p-6 text-center border-t-4 border-black dark:border-white bg-neutral-200 dark:bg-neutral-800 shadow-xl">
    <p class="text-neutral-800 dark:text-neutral-200 text-lg font-semibold mb-4">© 2023 Grayscale Gallery. All rights reserved.</p>
    <div class="flex justify-center flex-wrap gap-x-6 gap-y-2">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Privacy Policy</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Terms of Service</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Sitemap</a>
    </div>
  </footer>
</div>

관련 구성 요소

포트폴리오 레이아웃

보색, 다크 모드 지원 및 최소 요소와의 미시적 상호 작용에 중점을 둔 포트폴리오를 위한 간단한 반응형 레이아웃 구성 요소입니다.

열다

Glassmorphism 대시보드 레이아웃

반투명 젖빛 유리와 같은 요소가 있는 대시보드를 위한 간단한 glassmorphism 레이아웃으로, 파스텔 색 구성표와 다크 모드 지원을 특징으로 합니다.

열다

Blog Layout with Gradient Sidebar(그라디언트 사이드바가 있는 블로그 레이아웃)

기본 콘텐츠 영역과 그라디언트 사이드바가 있는 반응형 블로그 레이아웃 구성 요소로, 미묘한 음소거 색상, 부드러운 전환 및 완전한 다크 모드 지원을 제공합니다. 다양한 화면 크기에서 콘텐츠를 소비할 수 있도록 설계되었습니다.

열다