검색 구성 요소

모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

Product Gallery 구성 요소

Neumorphism 디자인 스타일과 보색 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 음악/오디오 플랫폼에 맞게 조정됩니다. 다크 모드 지원 및 트랙 목록, 아티스트 정보 및 재생 버튼과 같은 기능이 포함되어 있습니다.

열다 미리 보기

                <div class="p-4 sm:p-8 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 min-h-screen font-sans transition-colors duration-300">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 tracking-tight leading-tight pt-4 dark:text-orange-300 text-teal-700">
    Featured Albums & Tracks
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">

    <!-- Album Card 1 -->
    <div class="relative bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1043/400/400" alt="Album Art - Chill Vibes" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Sunset Sessions</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Aurora Beats</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">50K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Golden Hour</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Ocean Breeze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Midnight Drive</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1070/400/400" alt="Album Art - Cosmic Sounds" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Starlight Symphony</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Cosmic Cadence</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">75K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Nebula Drift</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Pulsar Echoes</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Galactic Haze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1062/400/400" alt="Album Art - Indie Folk" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Forest Whispers</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Willow Creek</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">60K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Evergreen Path</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. River's Song</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Misted Dawn</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (usually in a CSS file or <style> block, but for a single HTML component, inline is shown for completeness) -->
  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px rgba(174, 174, 192, 0.4), -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.4), -7px -7px 15px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-pressed {
      box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.5), inset -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-pressed-dark {
      box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.08);
    }

    .shadow-inner-neumorphic {
      box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.03);
    }

    .shadow-neumorphic-button {
      box-shadow: 5px 5px 10px rgba(174, 174, 192, 0.4), -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-button-pressed {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.3);
    }
    .dark .shadow-neumorphic-button-pressed-dark {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.1);
    }
    /* Complementary colors (teal and orange-ish) */
    .text-teal-700 { color: #0f766e; } /* Deeper Teal for headings */
    .dark .text-orange-300 { color: #fdba74; } /* Lighter Orange for headings */
    .bg-teal-500 { background-color: #14b8a6; } /* Primary Teal for buttons */
    .dark .bg-orange-500 { background-color: #f97316; } /* Primary Orange for buttons */
    .dark .bg-orange-600 { background-color: #ea580c; } /* Darker Orange for buttons */
    .text-teal-600 { color: #0d9488; } /* Teal for links/icons */
    .hover\:text-teal-800:hover { color: #065f46; } /* Darker Teal on hover */
    .dark .text-orange-400 { color: #fb923c; } /* Orange for links/icons */
    .dark .hover\:text-orange-bright:hover { color: #ffedd5; } /* Brighter Orange on hover */
  </style>

</div>

Skeuomorphic_Purple_Pagination

컨설팅/서비스 웹 사이트를 위해 설계된 복잡한 스큐어모픽 페이지 매김 구성 요소로, 자주색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <nav class="flex justify-center items-center py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-violet-200 dark:from-gray-900 dark:to-black rounded-xl shadow-xl border border-purple-300 dark:border-gray-700" aria-label="Pagination">
  <div class="flex flex-wrap gap-2 sm:gap-4 justify-center">
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Previous Page">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z" clip-rule="evenodd" />
      </svg>
      <span class="hidden sm:inline ml-2">Previous</span>
    </a>
    <div class="hidden sm:flex rounded-lg shadow-md border border-purple-400 dark:border-purple-700">
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white dark:text-gray-100 bg-gradient-to-br from-purple-600 to-purple-700 dark:from-purple-700 dark:to-purple-800 rounded-l-lg shadow-inner-lg shadow-purple-900/[.3] dark:shadow-purple-950/[.6] ring-2 ring-purple-500 dark:ring-purple-600 ring-offset-2 ring-offset-purple-200 dark:ring-offset-gray-900 transition-all duration-300 ease-in-out transform scale-105 border border-purple-700 dark:border-purple-800 focus:outline-none">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        2
      </a>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-300 bg-gradient-to-br from-purple-200 to-purple-300 dark:from-purple-900 dark:to-gray-950 -ml-px" aria-disabled="true">
        ...
      </span>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        9
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px rounded-r-lg hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        10
      </a>
    </div>
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Next Page">
      <span class="hidden sm:inline mr-2">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Luxury_Medical_Audio_Player

의료 애플리케이션을 위한 복잡하고 반응이 빠른 고급 테마의 오디오 플레이어 구성 요소로, 정교한 타이포그래피, 세련된 색상 팔레트(트라이어딕) 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8 md:p-10">
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
        <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
            <p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
          </div>
        </div>

        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
            Mindfulness Meditation for Stress Relief
          </h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
            Dr. Eleanor Vance, Clinical Psychologist
          </p>
          <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
            <svg class="w-4 h-4" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
            <span>Session 1 of 5</span>
            <span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
            <span>30 min</span>
          </div>
        </div>
      </div>

      <div class="mt-8">
        <div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
          <div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
          <div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
        </div>
        <div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
          <span>0:14</span>
          <span>29:46</span>
        </div>
      </div>

      <div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" 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="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
        </button>
        <button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>

      <div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
        <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
        <ul class="space-y-4">
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-pink-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

오류 메시지 구성 요소

스위스/국제 타이포그래피 스타일과 바다/파란색 색 구성표를 사용하는 간단하고 깨끗하며 반응이 빠른 오류 메시지 구성 요소로, 음식 배달 및 레스토랑 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-sky-50 dark:bg-gray-900 p-4 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 border-t-4 border-blue-600 dark:border-blue-500 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex items-center space-x-4 mb-5">
      <svg class="h-10 w-10 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white capitalize tracking-tight">
        Oops! Order Failed
      </h2>
    </div>

    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
      We're sorry, but there was an issue processing your order. Please review the details below or try again.
    </p>

    <ul class="list-none p-0 space-y-3 mb-8">
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Payment authorization failed. Your bank might have declined the transaction.</span>
      </li>
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Item quantity exceeded restaurant stock for some items.</span>
      </li>
    </ul>

    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 10.59V10m5.72-.94l-2.67 2.67m0 0l2.67 2.67m-2.67-2.67H7.72" />
        </svg>
        Retry Order
      </button>
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-9 2v4a1 1 0 001 1h3" />
        </svg>
        Back to Home
      </button>
    </div>
  </div>
</div>

레트로세션 타임아웃어래트(RetroSessionTimeoutAlert)

흙색이 있는 레트로 테마의 세션 시간 초과 경고 구성 요소로, 블로그/콘텐츠 사이트를 위해 설계되었습니다. 반응형 디자인과 다크 모드 지원으로 향수를 불러일으키는 모습이 특징입니다.

열다 미리 보기

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/40 dark:bg-black/50 backdrop-blur-sm">
  <div class="relative p-6 rounded-lg shadow-xl max-w-sm w-full bg-stone-100 text-stone-800 border-4 border-stone-400 dark:bg-stone-800 dark:text-stone-100 dark:border-stone-600 font-mono animate-fade-in-down">
    <div class="absolute -top-4 -right-4 bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-100 px-3 py-1 rounded-full text-sm font-bold shadow-md transform rotate-2 origin-top-right border-2 border-stone-500 dark:border-stone-700">
      ALERT!
    </div>
    
    <div class="flex items-center space-x-4 mb-4">
      <div class="w-12 h-12 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-full text-white text-3xl font-bold border-2 border-red-700 dark:border-red-900 shadow-inner flex-shrink-0">
        !
      </div>
      <div>
        <h3 class="text-xl font-bold mb-1 uppercase tracking-wide text-stone-700 dark:text-stone-200">
          Session Expiring Soon
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">
          Due to inactivity, your session will expire in:
        </p>
      </div>
    </div>
    
    <div class="flex justify-center items-baseline mb-6 space-x-2">
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownMinutes">04</span>
      <span class="text-3xl font-bold text-red-600 dark:text-red-400 leading-none">:</span>
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownSeconds">59</span>
    </div>
    
    <p class="text-center text-sm mb-6 text-stone-600 dark:text-stone-400">
      Click 'Continue Session' to stay logged in and prevent data loss.
    </p>
    
    <div class="flex flex-col sm:flex-row gap-3">
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-lime-600 hover:bg-lime-700 text-white shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-lime-800 active:border-b-0 dark:bg-lime-700 dark:hover:bg-lime-800 dark:border-lime-900">
        Continue Session
      </button>
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-stone-300 hover:bg-stone-400 text-stone-800 shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-stone-500 active:border-b-0 dark:bg-stone-600 dark:hover:bg-stone-700 dark:text-stone-200 dark:border-stone-800">
        Logout
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

아르 데코 뉴스 탭 구성 요소

뉴스 및 저널리즘 웹 사이트를 위해 설계된 복잡하고 반응이 빠르며 고급스러운 '아르 데코' 스타일 탭 구성 요소로, 기하학적 패턴, 풍부한 아날로그 색상 및 다크 모드 지원을 특징으로 합니다. 콘텐츠 탐색을 위한 여러 대화형 요소를 제공합니다.

열다 미리 보기

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-amber-100 dark:bg-zinc-800 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border-inverted"></div>

    <!-- Main Content Area -->
    <div class="p-6 md:p-10 lg:p-12 relative z-10">
      <h2 class="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 md:mb-12 text-zinc-800 dark:text-amber-50 drop-shadow-lg font-serif tracking-wide leading-tight">
        <span class="block">The Daily Dispatch</span>
        <span class="block text-2xl sm:text-3xl md:text-4xl text-amber-600 dark:text-sky-500 mt-2 font-normal">Global News at Your Fingertips</span>
      </h2>

      <!-- Tabs Navigation -->
      <div class="flex flex-wrap justify-center mb-8 border-b-4 border-amber-300 dark:border-zinc-700 bg-amber-200 dark:bg-zinc-700 rounded-t-lg shadow-inner">
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 first:rounded-tl-lg last:rounded-tr-lg active-tab transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Headlines</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">World</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Business</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Tech</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Culture</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <div class="tab-content bg-amber-50 dark:bg-zinc-900 p-6 md:p-8 lg:p-10 rounded-b-lg border-2 border-amber-300 dark:border-zinc-700 shadow-lg">
        <!-- Headline Tab Content -->
        <div class="tab-pane active-pane">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- News Card 1 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Revolutionary AI Breakthrough Achieves Human-Level Cognition</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Scientists at the Silicon Valley Institute announce a groundbreaking development in artificial intelligence, achieving unprecedented cognitive capabilities...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Technology</span>
                  <span>2 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 2 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=2" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Global Leaders Convene for Climate Emergency Summit</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Delegates from over 150 nations have gathered in Geneva to address the escalating climate crisis, proposing bold new targets and initiatives...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">World Affairs</span>
                  <span>5 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 3 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=3" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Art Market Boom: Rare Masterpiece Fetches Record Price</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">A previously unseen painting by a renowned Post-Impressionist artist sold for an astounding sum at Sotheby's, signaling a robust fine art market...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Culture</span>
                  <span>1 day ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 4 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden md:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">New Economic Policies Aim to Boost Small Businesses</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Government unveils a comprehensive stimulus package, including tax breaks and grants, designed to support and foster growth among small and medium enterprises...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Business & Finance</span>
                  <span>Yesterday</span>
                </div>
              </div>
            </article>

            <!-- News Card 5 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden lg:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=5" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Exploration Mission Discovers Ancient Underwater City</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Deep-sea archaeologists have uncovered ruins of a vast civilization beneath the Pacific, rewriting history and sparking new theories...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Science & Discovery</span>
                  <span>2 days ago</span>
                </div>
              </div>
            </article>

             <!-- Large News Card (Featured Headline - visible on all screens) -->
             <article class="col-span-1 md:col-span-2 lg:col-span-3 bg-amber-200 dark:bg-zinc-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border-4 border-amber-400 dark:border-sky-600 group relative flex flex-col md:flex-row">
                <div class="absolute inset-0 bg-gradient-to-br from-gold-500/30 to-yellow-700/30 dark:from-cyan-600/30 dark:to-blue-800/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
                <img src="https://picsum.photos/800/600?random=6" alt="Feature News Image" class="w-full md:w-1/2 h-64 md:h-auto object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none border-b-4 md:border-r-4 border-amber-400 dark:border-sky-600">
                <div class="p-6 md:p-8 lg:p-10 flex flex-col justify-center w-full md:w-1/2">
                  <h3 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-zinc-900 dark:text-amber-50 mb-4 leading-tight font-serif drop-shadow-md">
                    <a href="#" class="hover:text-amber-800 dark:hover:text-sky-300 transition-colors duration-200">Exclusive: Geopolitical Tensions Rise Amidst Unprecedented Diplomatic Shuffle</a>
                  </h3>
                  <p class="text-zinc-800 dark:text-zinc-100 text-lg mb-6 line-clamp-4 leading-relaxed">Our senior correspondents provide an in-depth analysis of the recent shifts in international relations, exploring the ripple effects across continents and the potential for a new global order. Exclusive insights from top diplomats and analysts reveal complex motivations and hidden agendas...</p>
                  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between text-md text-amber-700 dark:text-sky-300 font-semibold">
                    <span class="mb-2 sm:mb-0">Featured Analysis</span>
                    <div class="flex items-center">
                      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-amber-400 dark:border-sky-600">
                      <span>By Dr. Alistair Finch • 3 hours ago</span>
                    </div>
                  </div>
                </div>
              </article>

          </div>
        </div>

        <!-- Other Tab Contents (Hidden by default, for demonstration) -->
        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'World News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">European Union Reforms</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New parliamentary decisions reshape the future of the European economy and social policies...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Middle East Peace Talks</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Renewed diplomatic efforts aim to broker a lasting peace agreement in the troubled region...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Business News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Stock Market Volatility</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Analysts warn of impending corrections amid global economic uncertainties...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Tech Giant Acquisitions</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Major players in the tech industry are consolidating their power through strategic buyouts...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Tech News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Quantum Computing Leaps</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New advancements promise to revolutionize computation and data security...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">AI Ethics Debate</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Philosophers and engineers grapple with the moral implications of autonomous systems...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Culture News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Emerging Art Scenes</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Underground art movements are gaining mainstream recognition in major cities...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Literary Awards Season</h3>
              <p class="text-zinc-700 dark:text-zinc-300">The annual celebration of literary excellence unveils unexpected winners...</p>
            </article>
          </div>
        </div>

      </div>

      <div class="text-center mt-8 md:mt-12 text-zinc-600 dark:text-zinc-400 text-sm">
        <p>&copy; 2023 The Daily Dispatch. All rights reserved. Designed with Art Deco flair.</p>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Art Deco Geometric Patterns -->
<style>
  .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  /* Dark mode specific adjustments for clip-path */
  .dark .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .dark .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
</style>

<!-- Simple JS for tab functionality (as per instructions, only HTML and Tailwind, but functional tabs require JS) -->
<!-- For a real-world scenario, this JS would be external or inline if absolutely necessary. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.flex.flex-wrap button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
      button.addEventListener('click', (event) => {
        // Remove active state from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active-tab'));
        tabPanes.forEach(pane => pane.classList.add('hidden'));

        // Add active state to the clicked button
        event.currentTarget.classList.add('active-tab');

        // Determine which tab content to show based on button index
        const index = Array.from(tabButtons).indexOf(event.currentTarget);
        if (tabPanes[index]) {
          tabPanes[index].classList.remove('hidden');
        }
      });
    });

    // Initialize first tab as active
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

아르 데코 콘텐츠 디스플레이 구성 요소

비즈니스/기업 웹사이트를 위한 복잡하고 반응이 빠른 아르데코 스타일의 콘텐츠 디스플레이 구성 요소로, 기하학적 패턴, 풍부한 보석 색조 및 다크 모드 지원을 특징으로 합니다. 기능, 추천사 및 클릭 유도문안에 대한 여러 섹션이 포함되어 있습니다.

열다 미리 보기

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8 overflow-hidden">

  <!-- Header Section with Geometric Accent -->
  <div class="relative max-w-7xl mx-auto mb-16 text-center">
    <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-br from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 opacity-20 transform -skew-y-3 z-0"></div>
    <h1 class="relative text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-800 dark:text-emerald-300 mb-4 z-10">
      <span class="block">Elevating Your Vision</span>
      <span class="text-ruby-700 dark:text-ruby-400">With Unrivaled Precision</span>
    </h1>
    <p class="relative mt-4 text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto z-10">
      Discover the cornerstone of modern enterprise with our bespoke solutions, crafted for the discerning business.
    </p>
    <div class="relative w-24 h-1 items-center justify-center mx-auto mt-8 mb-4 bg-sapphire-600 dark:bg-sapphire-400 transform skew-x-12 z-10"></div>
  </div>

  <!-- Main Content Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">

    <!-- Feature Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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="M9.75 17L9.75 12L12 12V17L9.75 17ZM5.75 12L5.75 17L8 17L8 12L5.75 12ZM13.75 12L13.75 17L16 17L16 12L13.75 12ZM19.75 12L19.75 17L22 17L22 12L19.75 12ZM2 10L22 10V4L2 4V10ZM2 2L22 2L22 19L2 19V2Z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4">Visionary Strategy</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Harness the power of foresight with our cutting-edge strategic insights, tailored to navigate the complexities of tomorrow's market.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Explore More
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-sapphire-600 dark:bg-sapphire-500 text-white shadow-lg mb-6 transform rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.007 6.38L21 17l-3-7h4L10 21v-7a5.002 5.002 0 00-6.007-6.38L3 6z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300 mb-4">Robust Implementation</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          From concept to execution, our meticulous implementation ensures seamless integration and unparalleled performance.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Learn How
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-400">
      <div class="absolute inset-0 bg-gradient-to-br from-ruby-500 to-rose-600 dark:from-ruby-700 dark:to-rose-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-ruby-600 dark:bg-ruby-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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="M9 12l2 2 4-4m5.618-4.504A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.552M12 2.944V3m0 0V19.944m0-16.992a1.5 1.5 0 00-1.5 1.5V11.25a1.5 1.5 0 001.5 1.5 1.5 1.5 0 001.5-1.5V4.444A1.5 1.5 0 0012 2.944zm0 0L21 12M3 12l9 9"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-ruby-800 dark:text-ruby-300 mb-4">Sustainable Growth</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Cultivate lasting success with our growth-oriented strategies, designed for long-term prosperity and market leadership.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Start Growing
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Testimonial Section -->
  <div class="max-w-7xl mx-auto mt-24">
    <h2 class="text-center text-3xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-12 sm:mb-16">
      What Our Visionaries Say
    </h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

      <!-- Testimonial 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-right">
        <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-sapphire-400 dark:border-sapphire-600 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Partnering with them was a paradigm shift. Their meticulous approach led to unprecedented growth and market dominance.”</p>
          <p class="font-bold text-xl text-sapphire-800 dark:text-sapphire-300">Eleanor Vance</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CEO, Global Innovations Corp.</p>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-left">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-emerald-400 dark:border-emerald-600 shadow-md" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Their strategic foresight is unparalleled. We've optimized our operations and expanded our reach beyond expectations.”</p>
          <p class="font-bold text-xl text-emerald-800 dark:text-emerald-300">Julian Thorne</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CTO, Apex Dynamics</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="max-w-7xl mx-auto mt-24 relative overflow-hidden rounded-lg shadow-2xl animate-fade-in-up delay-600">
    <div class="absolute inset-0 bg-gradient-to-br from-ruby-600 to-rose-700 dark:from-ruby-800 dark:to-rose-900 opacity-90"></div>
    <div class="relative z-10 p-12 sm:p-16 lg:flex lg:items-center lg:justify-between">
      <div class="text-center lg:text-left">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-4">
          Ready to Redefine Your Future?
        </h2>
        <p class="text-xl text-ruby-200 dark:text-ruby-300 max-w-2xl mx-auto lg:mx-0">
          Join the elite who trust our expertise to carve their path to unparalleled success. Your journey begins now.
        </p>
      </div>
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center lg:mt-0 lg:ml-8 flex-shrink-0 space-y-4 sm:space-y-0 sm:space-x-4">
        <a href="#" class="w-full sm:w-auto px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-emerald-900 bg-emerald-300 hover:bg-emerald-200 dark:text-emerald-900 dark:bg-emerald-300 dark:hover:bg-emerald-200 transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Get Started Now
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-lg font-medium rounded-full text-white hover:bg-white hover:text-ruby-700 dark:hover:text-ruby-700 dark:hover:bg-white transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Art Deco palette */
  .text-emerald-800 { color: #065F46; } /* Darker Emerald */
  .dark\:text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for Dark Mode */
  .bg-emerald-600 { background-color: #059669; }
  .dark\:bg-emerald-500 { background-color: #10B981; }
  .from-emerald-500 { --tw-gradient-from: #10B981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
  .to-teal-600 { --tw-gradient-to: #0D9488; }
  .dark\:from-emerald-700 { --tw-gradient-from: #047857; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 120, 87, 0)); }
  .dark\:to-teal-800 { --tw-gradient-to: #0F766E; }

  .text-sapphire-800 { color: #1E40AF; } /* Darker Sapphire */
  .dark\:text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for Dark Mode */
  .bg-sapphire-600 { background-color: #2563EB; }
  .dark\:bg-sapphire-500 { background-color: #3B82F6; }
  .from-sapphire-500 { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
  .to-indigo-600 { --tw-gradient-to: #4F46E5; }
  .dark\:from-sapphire-700 { --tw-gradient-from: #1D4ED8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
  .dark\:to-indigo-800 { --tw-gradient-to: #3730A3; }

  .text-ruby-700 { color: #B91C1C; } /* Darker Ruby */
  .dark\:text-ruby-400 { color: #F87171; } /* Lighter Ruby for Dark Mode */
  .bg-ruby-600 { background-color: #DC2626; }
  .dark\:bg-ruby-500 { background-color: #EF4444; }
  .from-ruby-500 { --tw-gradient-from: #EF4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
  .to-rose-600 { --tw-gradient-to: #E11D48; }
  .dark\:from-ruby-700 { --tw-gradient-from: #B91C1C; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
  .dark\:to-rose-800 { --tw-gradient-to: #9F1239; }

  .from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0)); }
  .dark\:from-emerald-800 { --tw-gradient-from: #065F46; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 95, 70, 0)); }

  /* Animation keyframes */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Apply animations to elements */
  .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; /* ensure initial state is hidden */ }
  .delay-200 { animation-delay: 0.2s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-600 { animation-delay: 0.6s; }
  .animate-fade-in-right { animation: fade-in-right 0.8s ease-out forwards; opacity: 0; }
  .animate-fade-in-left { animation: fade-in-left 0.8s ease-out forwards; opacity: 0; }

  /* Dark mode transition */
  body { transition: background-color 0.3s ease; }
  div, h1, h2, h3, p, a, img { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
</style>

Two-Factor Authentication 구성 요소

아르데코 미학으로 스타일링된 2단계 인증 구성 요소는 기하학적 패턴과 포레스트 그린 색상 팔레트를 특징으로 하며 소셜 미디어 애플리케이션에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <div class="text-center mt-8 mb-4">
      <svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
      </svg>
      <h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
      <p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <form class="space-y-6">
      <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
          </svg>
          Verify Code
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
        Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
      </p>
      <p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
        <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
      </p>
    </div>
  </div>
</div>


<style>
  /* This is an optional style for better visual of Art Deco inputs, 
     though the core design is pure Tailwind */
  .ArtDecoInput {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* This clip-path attempts a more geometric shape; 
       Adjust values for desired effect. Pure CSS for complex shapes is limited. */
    /* For simpler rounded squares, remove clip-path */
  }
  .dark .ArtDecoInput {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  }
</style>

아르 데코 여행 미디어 구성 요소

여행 및 관광 웹사이트를 위한 복잡한 아르데코에서 영감을 받은 미디어 구성 요소로, 세피아/브라운 톤과 기하학적 패턴의 목적지 하이라이트를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Outer Deco Frame -->
  <div class="relative border-[6px] border-amber-900/60 dark:border-stone-700/60 p-4 sm:p-6 md:p-8 lg:p-10 shadow-2xl dark:shadow-stone-950/70 overflow-hidden">
    <div class="absolute inset-0 border-[3px] border-solid border-amber-800/40 dark:border-stone-800/40 opacity-70"></div>
    <div class="absolute inset-4 -m-[2px] border-[2px] border-dashed border-amber-700/30 dark:border-stone-600/30 opacity-50"></div>

    <!-- Background Geometric Pattern (Subtle) -->
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,247,237,0.3)_0%,transparent_100%)] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(60,60,60,0.3)_0%,transparent_100%)] z-0"></div>
    <div class="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:30px_30px] bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px),repeating-linear-gradient(-45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px)] from-amber-700/30 to-amber-700/30 dark:from-stone-700/30 dark:to-stone-700/30 z-0"></div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Left Section: Main Media Display -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="w-full aspect-video md:aspect-[16/9] bg-stone-200 dark:bg-stone-800 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50 overflow-hidden relative">
          <img src="https://picsum.photos/id/1010/1200/700" alt="Panoramic view of ancient city" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent">
            <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-white">
              <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif tracking-wider leading-tight text-amber-50 drop-shadow-lg">Mysteries of the Nile</h2>
              <p class="mt-2 text-base sm:text-lg opacity-90 max-w-lg hidden sm:block">Explore ancient wonders and timeless landscapes on a journey through history.</p>
            </div>
            <div class="absolute top-4 right-4 bg-amber-800/80 dark:bg-stone-800/80 text-white px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-semibold tracking-wider uppercase border border-amber-700 dark:border-stone-700 shadow-md">
              Featured Destination
            </div>
          </div>
        </div>

        <!-- Controls/Navigation (Optional: if this were interactive) -->
        <div class="mt-6 w-full flex justify-center space-x-4">
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" 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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" 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="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Features -->
      <div class="lg:col-span-1">
        <div class="bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Journey Highlights</h3>

          <div class="grid gap-4">
            <!-- Highlight 1 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1020/80/80" alt="Pyramid" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Ancient Pyramids</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Unravel the secrets of Giza's majestic structures.</p>
              </div>
            </div>

            <!-- Highlight 2 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1025/80/80" alt="Desert Sunset" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Desert Safaris</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Experience the golden dunes at dusk.</p>
              </div>
            </div>

            <!-- Highlight 3 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1038/80/80" alt="River Boat" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Nile River Cruises</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Leisurely cruising through history.</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <p class="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-2">Discover more about this exquisite journey:</p>
            <button class="w-full bg-amber-800 dark:bg-stone-700 text-white font-bold text-lg sm:text-xl py-3 px-6 rounded-md shadow-lg dark:shadow-stone-900/50 hover:bg-amber-700 dark:hover:bg-stone-600 transform hover:scale-105 transition-all duration-300 border-2 border-amber-700 dark:border-stone-600 tracking-wider uppercase">
              Book Your Adventure
            </button>
          </div>
        </div>

        <!-- Traveler Reviews/Profiles -->
        <div class="mt-8 bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Traveler's Voice</h3>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Eleanor Vance</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"A truly unforgettable experience!"</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Arthur Sterling</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"Seamless and breathtaking."</p>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

Retro_Alert_Messages_Component

대시보드에 적합한 레트로/빈티지 블랙, 화이트 및 네온 액센트 색상 구성표가 있는 간단하고 반응이 빠른 경고 메시지 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="max-w-md mx-auto space-y-4">

    <!-- Success Alert -->
    <div class="relative p-4 border-2 border-green-500 bg-black text-green-500 shadow-neon-green overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-green-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Operation Success!</h3>
          <p class="text-sm">Your data has been successfully processed.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="relative p-4 border-2 border-blue-500 bg-black text-blue-500 shadow-neon-blue overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-blue-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Information Update</h3>
          <p class="text-sm">New dashboard features are available for testing.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="relative p-4 border-2 border-yellow-500 bg-black text-yellow-500 shadow-neon-yellow overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-yellow-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Caution Advised</h3>
          <p class="text-sm">Potential data discrepancies detected in report #345.</p>
        </div>
      </div>
    </div>

    <!-- Error Alert -->
    <div class="relative p-4 border-2 border-red-500 bg-black text-red-500 shadow-neon-red overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-red-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">System Error!</h3>
          <p class="text-sm">Failed to connect to the backend server. Please retry.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is an example of including custom CSS for the retro effect within the HTML. */
  /* In a real scenario, this would ideally be in a separate CSS file or configured via Tailwind JIT/config */

  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    0% { filter: drop-shadow(0 0 0px var(--neon-color)); }
    100% { filter: drop-shadow(0 0 5px var(--neon-color)) drop-shadow(0 0 15px var(--neon-color)) drop-shadow(0 0 30px var(--neon-color)); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  /* Neon Glow Shadows (for retro effect) */
  .shadow-neon-green {
    --neon-color: theme('colors.green.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-blue {
    --neon-color: theme('colors.blue.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-yellow {
    --neon-color: theme('colors.yellow.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-red {
    --neon-color: theme('colors.red.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  /* Utility for dark mode background, not part of the component itself but for demonstration */
  body {
    transition: background-color 0.3s ease-in-out;
  }
  body.dark {
    background-color: theme('colors.gray.900');
  }
</style>

1 ... 107 108 109 110 111 ... 335

검색 구성 요소

카테고리

모든 구성 요소