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

JewelTone_Photography_Gallery

보석 색조 색상과 깔끔한 타이포그래피 레이아웃이 있는 복잡하고 반응이 빠른 사진 갤러리 구성 요소로, 그리드 시스템과 다크 모드를 지원합니다. 사진작가 포트폴리오에 적합합니다.

미리 보기

HTML 코드 

<div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Gallery Header -->
  <header class="max-w-7xl mx-auto mb-8 sm:mb-12 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-4 tracking-tight">
      Capturing Moments
    </h1>
    <p class="text-lg sm:text-xl text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-2xl mx-auto">
      Explore a curated collection of visual stories, where light meets emotion and every frame tells a tale.
    </p>
    <div class="mt-6 flex justify-center space-x-4">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sapphire-700 hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600 dark:focus:ring-sapphire-400">
        View All Galleries
      </a>
      <a href="#" class="inline-flex items-center px-6 py-3 border border-zinc-300 dark:border-zinc-700 text-base font-medium rounded-md text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
        About The Artist
      </a>
    </div>
  </header>

  <!-- Gallery Categories/Filters -->
  <nav class="max-w-7xl mx-auto mb-8 sm:mb-12">
    <ul class="flex flex-wrap justify-center gap-3 sm:gap-4">
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-ruby-200 text-ruby-800 dark:bg-ruby-800 dark:text-ruby-200 hover:bg-ruby-300 dark:hover:bg-ruby-700 transition-colors duration-200">
          All
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Nature
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Portraits
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Abstract
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Urban
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Events
        </a>
      </li>
    </ul>
  </nav>

  <!-- Photo Grid -->
  <section class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- Photo Card 1 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1057/700/500" alt="Forest Stream" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Whispers of the Forest</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A serene stream winding through ancient trees, captured in soft morning light.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.2K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 2 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1025/700/500" alt="Woman's Portrait" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Gaze of Serenity</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A captivating portrait capturing the quiet strength and beauty of a woman.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          <span>Portraits</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">8.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 3 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1080/700/500" alt="Abstract Light" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Chromatic Dance</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An mesmerizing play of light and shadow, forming abstract patterns.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.243 3.636a1 1 0 011.514 0l3.05 4.195a1 1 0 01-.061 1.488l-2.43 2.193a1 1 0 01-1.353-.105l-1.89-2.122a1 1 0 01.105-1.353l2.193-2.43a1 1 0 011.488-.061L12.364 8.243a1 1 0 00-.707 1.707l-2.414 2.414a1 1 0 01-1.414 0L6.707 10.707a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414L3.636 17.243a1 1 0 01-1.414 0L.707 15.121a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414L.707 20a1 1 0 00-.707.707l2.414 2.414a1 1 0 010 1.414L3.636 24.364a1 1 0 011.414 0L5.757 26a1 1 0 001.707-.707l-2.414-2.414a1 1 0 010-1.414zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
          <span>Abstract Art</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">3.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 4 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1012/700/500" alt="Cityscape at Night" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Neon Metropolis</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The vibrant energy of a city skyline illuminated by countless lights.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">6.5K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 5 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1039/700/500" alt="Desert Landscape" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Echoes of the Sand</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Vast and silent desert landscape under a dramatic sky.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.8K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 6 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1042/700/500" alt="Coffee Shop Interior" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Urban Canvas</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The cozy ambiance of a bustling coffee shop.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Events</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 7 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1050/700/500" alt="Mountains and Lake" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Alpine Reflection</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Majestic mountains mirroring in a clear alpine lake.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">7.0K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 8 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1060/700/500" alt="Historical Building" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Timeless Stone</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An ancient architectural marvel standing against the test of time.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

  </section>

  <!-- Call to Action / Footer -->
  <footer class="max-w-7xl mx-auto mt-12 sm:mt-16 text-center">
    <div class="bg-ruby-100 dark:bg-ruby-900 rounded-lg p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between shadow-inner space-y-4 sm:space-y-0">
      <div class="text-ruby-800 dark:text-ruby-200 text-xl sm:text-2xl font-bold">
        Ready to bring your vision to life?
      </div>
      <a href="#" class="px-8 py-3 bg-ruby-600 text-white rounded-md shadow-lg hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:bg-ruby-500 dark:hover:bg-ruby-600">
        Contact Me
      </a>
    </div>
    <p class="mt-8 text-zinc-500 dark:text-zinc-400 text-sm">
      &copy; 2023 JewelTone Photography. All rights reserved.
    </p>
  </footer>

</div>

관련 구성 요소

갤러리 구성 요소

비즈니스/기업 웹사이트용으로 설계된 단순하고 반응이 빠른 이미지 갤러리 구성 요소로, Material Design 원칙에서 영감을 받은 트라이어딕 색 구성표를 특징으로 합니다. 사용자 기본 설정에 대한 어두운 테마가 포함되어 있으며 그리드 기반 레이아웃을 사용합니다.

열다

스큐어모픽 크립토 갤러리

암호화폐 및 블록체인 애플리케이션을 위해 설계된 복잡한 스큐어모픽 갤러리 구성 요소로, 보색, 응답성 및 다크 모드 지원을 특징으로 합니다. 오목한 버튼과 엠보싱 프레임과 같은 실제 요소를 모방합니다.

열다

3D_Muted_Gallery_Component

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

열다