검색 구성 요소

모든 구성 요소

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

사이버펑크 위시리스트 구성 요소

암호화폐/블록체인 애플리케이션을 위한 복잡한 사이버펑크 테마의 위시리스트 구성 요소로, 어두운 배경, 네온 주얼 톤 액센트, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

                <div class="min-h-screen bg-neutral-950 text-emerald-300 font-mono p-4 sm:p-8 dark:bg-black dark:text-teal-300">
  <div class="container mx-auto max-w-7xl relative overflow-hidden rounded-lg border-2 border-emerald-600 shadow-2xl shadow-emerald-900/50 dark:border-teal-700 dark:shadow-teal-900/50 backdrop-blur-sm bg-neutral-900/70 p-4 md:p-8">
    <div class="absolute inset-0 bg-gradient-to-br from-emerald-900/30 via-transparent to-sapphire-900/30 dark:from-teal-900/30 dark:to-blue-900/30 animate-pulse-slow z-0"></div>
    <div class="relative z-10">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-8 text-center text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_8px_rgba(45,212,191,0.7)] tracking-wider uppercase">
        <span class="block">CYBERNETIC</span> WATCHLIST
      </h1>

      <!-- Search and Filter Bar -->
      <div class="mb-8 flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
        <div class="relative flex-grow w-full sm:w-auto">
          <input type="text" placeholder="Search Cyber-Assets..." class="w-full py-3 pl-12 pr-4 bg-neutral-800 border-2 border-emerald-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-emerald-200 placeholder-emerald-400 dark:bg-gray-900 dark:border-teal-600 dark:focus:ring-teal-500 dark:text-teal-200 dark:placeholder-teal-400 transition-all duration-300 ascend-animation">
          <svg class="absolute left-4 top-1/2 -translate-y-1/2 h-6 w-6 text-emerald-500 dark:text-teal-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <select class="w-full sm:w-auto py-3 px-4 bg-neutral-800 border-2 border-emerald-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-emerald-200 dark:bg-gray-900 dark:border-teal-600 dark:focus:ring-teal-500 dark:text-teal-200 transition-all duration-300 ascend-animation">
          <option value="all">All Assets</option>
          <option value="crypto">Cryptocurrency</option>
          <option value="nft">NFTs</option>
          <option value="defi">DeFi Protocols</option>
        </select>
        <button class="w-full sm:w-auto px-6 py-3 bg-fuchsia-700 text-white font-bold rounded-lg hover:bg-fuchsia-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 transition-all duration-300 ascend-animation shadow-lg shadow-fuchsia-900/50 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-purple-500 dark:shadow-purple-900/50">Add New Asset</button>
      </div>

      <!-- Watchlist Items Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 fade-in-animation">
        <!-- Watchlist Item 1 -->
        <div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
          <div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-emerald-500/50 to-emerald-500/80 dark:via-teal-500/50 dark:to-teal-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
          <div class="flex items-center mb-4 relative z-10">
            <img src="https://picsum.photos/seed/bitcoin/60/60" alt="Bitcoin" class="w-16 h-16 rounded-full border-2 border-emerald-400 ring-2 ring-emerald-600 dark:border-teal-400 dark:ring-teal-600 shadow-md mr-4 aspect-square object-cover">
            <div>
              <h3 class="text-2xl font-bold text-emerald-300 dark:text-teal-300">BITCOIN</h3>
              <p class="text-emerald-500 dark:text-teal-500">$BTC</p>
            </div>
          </div>
          <div class="text-lg mb-4 leading-relaxed relative z-10">
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$68,345.21</span></p>
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-green-500 font-bold"><span class="mr-1">▲</span>+2.3%</span></p>
            <p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$1.3T</span></p>
          </div>
          <div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
            <button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
              <svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
              </svg>
              <span class="block">REMOVE</span>
            </button>
            <a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
          </div>
        </div>

        <!-- Watchlist Item 2 -->
        <div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
          <div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-fuchsia-500/50 to-fuchsia-500/80 dark:via-purple-500/50 dark:to-purple-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
          <div class="flex items-center mb-4 relative z-10">
            <img src="https://picsum.photos/seed/ethereum/60/60" alt="Ethereum" class="w-16 h-16 rounded-full border-2 border-fuchsia-400 ring-2 ring-fuchsia-600 dark:border-purple-400 dark:ring-purple-600 shadow-md mr-4 aspect-square object-cover">
            <div>
              <h3 class="text-2xl font-bold text-fuchsia-300 dark:text-purple-300">ETHEREUM</h3>
              <p class="text-fuchsia-500 dark:text-purple-500">$ETH</p>
            </div>
          </div>
          <div class="text-lg mb-4 leading-relaxed relative z-10">
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$3,789.12</span></p>
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-yellow-500 font-bold"><span class="mr-1">•</span>0.1%</span></p>
            <p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$455B</span></p>
          </div>
          <div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
            <button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
              <svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
              </svg>
              <span class="block">REMOVE</span>
            </button>
            <a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
          </div>
        </div>

        <!-- Watchlist Item 3 -->
        <div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
          <div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-sapphire-500/50 to-sapphire-500/80 dark:via-blue-500/50 dark:to-blue-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
          <div class="flex items-center mb-4 relative z-10">
            <img src="https://picsum.photos/seed/solana/60/60" alt="Solana" class="w-16 h-16 rounded-full border-2 border-sapphire-400 ring-2 ring-sapphire-600 dark:border-blue-400 dark:ring-blue-600 shadow-md mr-4 aspect-square object-cover">
            <div>
              <h3 class="text-2xl font-bold text-sapphire-300 dark:text-blue-300">SOLANA</h3>
              <p class="text-sapphire-500 dark:text-blue-500">$SOL</p>
            </div>
          </div>
          <div class="text-lg mb-4 leading-relaxed relative z-10">
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Price:</span> <span class="text-white font-bold text-xl">$150.78</span></p>
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">24h Change:</span> <span class="text-red-500 font-bold"><span class="mr-1">▼</span>-1.8%</span></p>
            <p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Market Cap:</span> <span class="text-white">$68B</span></p>
          </div>
          <div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
            <button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
              <svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
              </svg>
              <span class="block">REMOVE</span>
            </button>
            <a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Analytics</a>
          </div>
        </div>

        <!-- Watchlist Item 4 (Example NFT) -->
        <div class="bg-neutral-800/80 rounded-lg p-6 border border-emerald-700 shadow-lg shadow-emerald-900/30 hover:shadow-emerald-700/50 transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.01] overflow-hidden relative dark:bg-gray-900/80 dark:border-teal-600 dark:shadow-teal-900/30 dark:hover:shadow-teal-700/50 ascend-animation">
          <div class="absolute top-0 right-0 h-4 w-16 bg-gradient-to-r from-transparent via-ruby-500/50 to-ruby-500/80 dark:via-red-500/50 dark:to-red-500/80 transform origin-top-right skew-x-[-20deg] z-0"></div>
          <div class="flex items-center mb-4 relative z-10">
            <img src="https://picsum.photos/seed/nft/60/60" alt="NFT" class="w-16 h-16 rounded-full border-2 border-ruby-400 ring-2 ring-ruby-600 dark:border-red-400 dark:ring-red-600 shadow-md mr-4 aspect-square object-cover">
            <div>
              <h3 class="text-2xl font-bold text-ruby-300 dark:text-red-300">CYBERPUNK APE</h3>
              <p class="text-ruby-500 dark:text-red-500">#1337 NFT</p>
            </div>
          </div>
          <div class="text-lg mb-4 leading-relaxed relative z-10">
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Floor Price:</span> <span class="text-white font-bold text-xl">12.5 ETH</span></p>
            <p class="flex justify-between items-center mb-1"><span class="text-emerald-400 dark:text-teal-400">Owner:</span> <span class="text-white">0xAbCd...123F</span></p>
            <p class="flex justify-between items-center"><span class="text-emerald-400 dark:text-teal-400">Collection:</span> <span class="text-white">BioMech Beasts</span></p>
          </div>
          <div class="flex justify-between items-center border-t border-emerald-700 pt-4 relative z-10 dark:border-teal-600">
            <button class="text-fuchsia-400 hover:text-fuchsia-300 transition-colors duration-300 flex items-center group">
              <svg class="w-6 h-6 mr-1 text-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.092-.44 1.532 0l4.314 4.314a1.125 1.125 0 010 1.592l-4.314 4.314a1.125 1.125 0 01-1.592 0l-4.314-4.314a1.125 1.125 0 010-1.592l4.314-4.314z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M7.646 6.146a.75.75 0 011.06 0L12 9.49l3.293-3.344a.75.75 0 111.06 1.06L13.06 10.551a1.125 1.125 0 01-1.592 0L7.586 7.207a.75.75 0 010-1.06z" clip-rule="evenodd" />
                <path fill-rule="evenodd" d="M4.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM12 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75zM19.5 17.5a.75.75 0 01-.75-.75V14.5a.75.75 0 011.5 0v2.25a.75.75 0 01-.75.75z" clip-rule="evenodd" />
              </svg>
              <span class="block">REMOVE</span>
            </button>
            <a href="#" class="px-4 py-2 bg-sapphire-700 text-white rounded-md text-sm hover:bg-sapphire-600 focus:outline-none focus:ring-2 focus:ring-sapphire-500 transition-all duration-300 shadow-md shadow-sapphire-900/50 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:shadow-blue-900/50">View Protocol</a>
          </div>
        </div>

      </div>

      <!-- Pagination/Footer - Example of more interactive elements for complexity -->
      <div class="mt-12 flex flex-col md:flex-row items-center justify-between text-sm text-emerald-500 dark:text-teal-500 border-t border-emerald-800 pt-8 dark:border-teal-800">
        <div class="mb-4 md:mb-0">
          <p>&copy; 2077 Nexus Watch. All Cyber-Rights Reserved.</p>
        </div>
        <div class="flex space-x-4">
          <button class="px-4 py-2 bg-neutral-800 border border-emerald-700 rounded-md hover:bg-neutral-700 transition-all duration-300 dark:bg-gray-900 dark:border-teal-700 dark:hover:bg-gray-800">Previous</button>
          <span class="px-4 py-2">Page 1 of 3</span>
          <button class="px-4 py-2 bg-neutral-800 border border-emerald-700 rounded-md hover:bg-neutral-700 transition-all duration-300 dark:bg-gray-900 dark:border-teal-700 dark:hover:bg-gray-800">Next</button>
        </div>
      </div>

    </div>
  </div>

  <!-- Custom Styles for animations and colors not derivable directly from Tailwind defaults -->
  <style>
    @keyframes pulse-slow {
      0% { opacity: 0.1; }
      50% { opacity: 0.3; }
      100% { opacity: 0.1; }
    }

    .animate-pulse-slow {
      animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes ascend {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .ascend-animation {
      animation: ascend 0.5s ease-out forwards;
      opacity: 0; /* Ensures elements are hidden before animation */
    }

    .ascend-animation:nth-child(1) { animation-delay: 0.1s; }
    .ascend-animation:nth-child(2) { animation-delay: 0.2s; }
    .ascend-animation:nth-child(3) { animation-delay: 0.3s; }
    .ascend-animation:nth-child(4) { animation-delay: 0.4s; }
    .ascend-animation:nth-child(5) { animation-delay: 0.5s; }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .fade-in-animation {
      animation: fadeIn 0.8s ease-out forwards; 
    }

    /* Custom Colors for 'Jewel Tones' not directly in Tailwind default palette */
    .text-emerald-300 { color: #6ee7b7; }
    .text-emerald-400 { color: #34d399; }
    .text-emerald-500 { color: #10b981; }
    .text-emerald-600 { color: #059669; }
    .text-emerald-700 { color: #047857; }
    .text-emerald-800 { color: #065f46; }
    .text-emerald-900\/50 { background-color: rgba(6, 95, 70, 0.5); }
    .shadow-emerald-900\/50 { box-shadow: 0 25px 50px -12px rgba(6, 95, 70, 0.5); }
    .hover\:shadow-emerald-700\/50:hover { box-shadow: 0 10px 15px -3px rgba(4, 120, 87, 0.5), 0 4px 6px -2px rgba(4, 120, 87, 0.5); }

    .bg-fuchsia-700 { background-color: #c026d3; }
    .hover\:bg-fuchsia-600:hover { background-color: #a21caf; }
    .focus\:ring-fuchsia-500:focus { --tw-ring-color: #d946ef; }
    .shadow-fuchsia-900\/50 { box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.5); }
    .text-fuchsia-300 { color: #E794FC; }
    .text-fuchsia-400 { color: #E06FFC; }
    .text-fuchsia-500 { color: #B300C3; }
    .via-fuchsia-500\/50 { background-image: linear-gradient(to right, transparent, rgba(233, 213, 255, 0.5), transparent); }
    .to-fuchsia-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(233, 213, 255, 0.8)); }
    .ring-fuchsia-600 { --tw-ring-color: #E75AFB; }
    .border-fuchsia-400 { border-color: #E794FC; }

    .bg-sapphire-700 { background-color: #0d47a1; /* Deep Blue from Material Design */ }
    .hover\:bg-sapphire-600:hover { background-color: #1565c0; }
    .focus\:ring-sapphire-500:focus { --tw-ring-color: #2196f3; }
    .shadow-sapphire-900\/50 { box-shadow: 0 25px 50px -12px rgba(13, 71, 161, 0.5); }
    .text-sapphire-300 { color: #64B5F6; }
    .text-sapphire-500 { color: #2196F3; }
    .via-sapphire-500\/50 { background-image: linear-gradient(to right, transparent, rgba(33, 150, 243, 0.5), transparent); }
    .to-sapphire-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(33, 150, 243, 0.8)); }
    .ring-sapphire-600 { --tw-ring-color: #1976D2; }
    .border-sapphire-400 { border-color: #64B5F6; }

    .bg-ruby-700 { background-color: #b71c1c; /* Deep Red from Material Design */ }
    .hover\:bg-ruby-600:hover { background-color: #c62828; }
    .focus\:ring-ruby-500:focus { --tw-ring-color: #ef5350; }
    .shadow-ruby-900\/50 { box-shadow: 0 25px 50px -12px rgba(183, 28, 28, 0.5); }
    .text-ruby-300 { color: #E57373; }
    .text-ruby-500 { color: #F44336; }
    .via-ruby-500\/50 { background-image: linear-gradient(to right, transparent, rgba(244, 67, 54, 0.5), transparent); }
    .to-ruby-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(244, 67, 54, 0.8)); }
    .ring-ruby-600 { --tw-ring-color: #D32F2F; }
    .border-ruby-400 { border-color: #E57373; }

    /* Dark Mode Custom Colors */
    .dark\:text-teal-300 { color: #5eead4; }
    .dark\:text-teal-400 { color: #2dd4bf; }
    .dark\:text-teal-500 { color: #14b8a6; }
    .dark\:border-teal-600 { border-color: #0d9488; }
    .dark\:border-teal-700 { border-color: #0f766e; }
    .dark\:border-teal-800 { border-color: #115e59; }
    .dark\:shadow-teal-900\/50 { box-shadow: 0 25px 50px -12px rgba(17, 94, 89, 0.5); }
    .dark\:hover\:shadow-teal-700\/50:hover { box-shadow: 0 10px 15px -3px rgba(15, 118, 110, 0.5), 0 4px 6px -2px rgba(15, 118, 110, 0.5); }
    .dark\:ring-teal-600 { --tw-ring-color: #0d9488; }
    .dark\:border-teal-400 { border-color: #2dd4bf; }

    .dark\:bg-purple-700 { background-color: #7e22ce; }
    .dark\:hover\:bg-purple-600:hover { background-color: #6d28d9; }
    .dark\:focus\:ring-purple-500:focus { --tw-ring-color: #a855f7; }
    .dark\:shadow-purple-900\/50 { box-shadow: 0 25px 50px -12px rgba(91, 33, 182, 0.5); }
    .dark\:text-purple-300 { color: #c4b5fd; }
    .dark\:text-purple-500 { color: #8b5cf6; }
    .dark\:via-purple-500\/50 { background-image: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.5), transparent); }
    .dark\:to-purple-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(168, 85, 247, 0.8)); }
    .dark\:ring-purple-600 { --tw-ring-color: #7c3aed; }
    .dark\:border-purple-400 { border-color: #a78bfa; }

    .dark\:bg-blue-700 { background-color: #1d4ed8; }
    .dark\:hover\:bg-blue-600:hover { background-color: #2563eb; }
    .dark\:focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
    .dark\:shadow-blue-900\/50 { box-shadow: 0 25px 50px -12px rgba(29, 78, 216, 0.5); }
    .dark\:text-blue-300 { color: #93c5fd; }
    .dark\:text-blue-500 { color: #3b82f6; }
    .dark\:via-blue-500\/50 { background-image: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.5), transparent); }
    .dark\:to-blue-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(59, 130, 246, 0.8)); }
    .dark\:ring-blue-600 { --tw-ring-color: #2563eb; }
    .dark\:border-blue-400 { border-color: #60a5fa; }

    .dark\:bg-red-700 { background-color: #dc2626; }
    .dark\:hover\:bg-red-600:hover { background-color: #ef4444; }
    .dark\:focus\:ring-red-500:focus { --tw-ring-color: #ef4444; }
    .dark\:shadow-red-900\/50 { box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.5); }
    .dark\:text-red-300 { color: #fca5a5; }
    .dark\:text-red-500 { color: #ef4444; }
    .dark\:via-red-500\/50 { background-image: linear-gradient(to right, transparent, rgba(239, 68, 68, 0.5), transparent); }
    .dark\:to-red-500\/80 { background-image: linear-gradient(to right, transparent, transparent, rgba(239, 68, 68, 0.8)); }
    .dark\:ring-red-600 { --tw-ring-color: #dc2626; }
    .dark\:border-red-400 { border-color: #fda4af; }
  </style>
</div>

Social Share Buttons 구성 요소

Bauhaus에서 영감을 받은 스포츠/피트니스 애플리케이션을 위한 소셜 공유 버튼은 기하학적 형태와 블루 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg p-5 sm:p-7 md:p-8 border-4 border-blue-600 dark:border-blue-300 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <h2 class="text-2xl sm:text-3xl font-extrabold text-center text-blue-800 dark:text-blue-200 mb-6 sm:mb-8 tracking-tighter sm:tracking-normal">
      Share This Victory!
    </h2>

    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:gap-8 justify-items-center">
      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-b-4 border-l-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.046 0h-19.109c-1.552 0-2.936 1.257-2.936 2.766v18.261c0 1.509 1.384 2.767 2.936 2.767h19.109c1.552 0 2.936-1.258 2.936-2.767v-18.261c0-1.509-1.384-2.766-2.936-2.766zm-3.094 17.561h-2.996v-5.607h2.996v5.607zm-.008-6.892c-.114-.492-.562-.835-1.047-.835-.615 0-1.047.464-1.047 1.093v3.744h-2.996v-12.721h2.996v1.921c.542-.782 1.385-1.353 2.502-1.353 1.83 0 3.257 1.341 3.257 4.254v7.899h-2.996l-.004-.007z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">LinkedIn</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-t-4 border-r-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.297 22V12.441H5.197V8.502H8.297V5.792c0-3.076 1.893-4.764 4.657-4.764 1.325 0 2.479.098 2.812.142v3.238l-1.916.001c-1.502 0-1.796.714-1.796 1.764v2.302h3.587l-.467 3.939h-3.12V22H8.297z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Facebook</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-t-4 border-l-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.89-.982-2.172-1.597-3.597-1.597-2.71 0-4.918 2.203-4.918 4.917 0 .386.046.764.129 1.127-4.093-.205-7.72-2.173-10.158-5.17A4.814 4.814 0 00.316 9.17c0 1.701.866 3.209 2.188 4.096-.807-.025-1.564-.247-2.222-.614v.061c0 2.385 1.696 4.372 3.946 4.827-.413.111-.849.171-1.296.171-.318 0-.626-.031-.925-.088.636 1.956 2.46 3.392 4.604 3.432-1.685 1.321-3.805 2.125-6.102 2.125-.398 0-.79-.023-1.173-.069 2.18 1.393 4.768 2.207 7.55 2.207 9.053 0 13.99-7.495 13.99-13.988 0-.214-.004-.426-.012-.637.962-.695 1.797-1.562 2.457-2.558z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Twitter</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-b-4 border-r-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.316 3.051l1.652 4.148 4.475.385c.677.058.956.883.475 1.38L16.51 12.396l.992 4.316c.162.705-.623 1.256-1.258.913L12 14.286l-3.244 1.839c-.636.343-1.42-.208-1.258-.913l.992-4.316-3.798-3.931c-.48-.497-.201-1.322.475-1.38l4.475-.385 1.652-4.148a.75.75 0 011.378 0z" clip-rule="evenodd" />
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Share</span>
      </a>
    </div>

    <p class="mt-8 text-center text-sm text-blue-700 dark:text-blue-400 font-medium opacity-80">
      Connect with us and celebrate winning moments!
    </p>
  </div>
</div>

메가 메뉴 구성 요소 - Paper/Print Retro Crypto

종이/인쇄물에서 영감을 받은 디자인과 레트로/빈티지 색상 팔레트를 갖춘 간단하고 반응이 빠른 메가 메뉴 구성 요소로, 암호화폐 및 블록체인 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <nav class="bg-amber-50 dark:bg-zinc-800 font-serif shadow-md dark:shadow-lg transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-wider uppercase flex items-center">
      <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-400" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
      CryptoInk
    </a>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-yellow-600 rounded-md p-2">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop & Mobile Menu Content -->
    <div id="mega-menu-content" class="hidden lg:flex lg:items-center lg:space-x-8 absolute lg:static top-full left-0 w-full lg:w-auto bg-amber-50 dark:bg-zinc-800 lg:bg-transparent lg:dark:bg-transparent shadow-lg lg:shadow-none transition-all duration-300 ease-out z-50 transform -translate-y-full lg:translate-y-0 text-center lg:text-left py-4 lg:py-0 border-t lg:border-t-0 border-stone-200 dark:border-zinc-700">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 w-full">
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Dashboard
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent group-hover:border-yellow-600 dark:group-hover:border-yellow-400 transition-colors duration-200 text-lg flex items-center justify-center lg:justify-start">
            Assets
            <svg class="ml-1 w-4 h-4 hidden lg:block" 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="M19 9l-7 7-7-7"></path></svg>
          </a>
          <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:mt-4 lg:w-64 lg:p-6 bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl dark:shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100 origin-top text-left border border-amber-200 dark:border-zinc-600">
            <div class="grid gap-4">
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">My Portfolio</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">View your crypto holdings.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Transactions</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Track your past trades.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Deposits/Withdrawals</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Manage funds.</p>
              </a>
            </div>
          </div>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Trade
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            News
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Support
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (outside of the required HTML part, for functional demo) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mega-menu-content');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
      menu.classList.toggle('translate-y-full'); // For initial offscreen position
      menu.classList.toggle('-translate-y-full'); // For initial offscreen position
      menu.classList.toggle('translate-y-0'); // For onscreen position
    });

    // Close menu when clicking outside on mobile
    document.addEventListener('click', function(event) {
      if (!menu.classList.contains('hidden') && !button.contains(event.target) && !menu.contains(event.target)) {
        menu.classList.add('hidden');
        menu.classList.add('-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });

    // Close the menu when a link inside it is clicked on mobile
    menu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        if (!menu.classList.contains('hidden') && window.innerWidth < 1024) { // 1024px is Tailwind's 'lg' breakpoint
          menu.classList.add('hidden');
          menu.classList.add('-translate-y-full');
          menu.classList.remove('translate-y-0');
        }
      });
    });

    // Handle window resize to reset menu state for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) {
        menu.classList.remove('hidden', '-translate-y-full', 'translate-y-0');
      } else {
        menu.classList.add('hidden', '-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });
  });
</script>

Carousel Slider 구성 요소

그라데이션 색상 전환이 있는 반응형 캐러셀 슬라이더 구성 요소로, 패션 및 뷰티 브랜드를 위해 설계되었습니다. 다크 모드 지원과 세련되고 모던한 디자인이 특징입니다.

열다 미리 보기

                <section class="relative w-full overflow-hidden py-12 bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-12">
      Featured Collections
    </h2>

    <div class="relative">
      <!-- Slider wrapper (emulated for static HTML, ideally managed by JS) -->
      <div class="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8 lg:space-x-12 animate-fade-in-up">

        <!-- Card 1 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1015/400/300" alt="Model wearing modern fashion">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Urban Chic</h3>
            <p class="text-sm opacity-90 mb-4">Effortless style meets city sophistication. Discover your new favorite looks.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-pink-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Shop Now
            </a>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-700 dark:to-red-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Beauty product display">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Radiant Glow</h3>
            <p class="text-sm opacity-90 mb-4">Illuminate your beauty with our premium skincare essentials.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-orange-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Explore More
            </a>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-green-400 to-blue-500 dark:from-teal-700 dark:to-blue-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Ethereal fashion shot">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Ethereal Dreams</h3>
            <p class="text-sm opacity-90 mb-4">Dive into a world of enchanting designs and luxurious fabrics.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-blue-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              View Collection
            </a>
          </div>
        </div>

      </div>

      <!-- Navigation arrows (emulated for static HTML, ideally managed by JS) -->
      <button aria-label="Previous slide" class="hidden md:block absolute top-1/2 -left-8 transform -translate-y-1/2 p-3 rounded-full
                              bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                              dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <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="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button aria-label="Next slide" class="hidden md:block absolute top-1/2 -right-8 transform -translate-y-1/2 p-3 rounded-full
                             bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                             dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <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="M9 5l7 7-7 7"></path></svg>
      </button>

    </div>

    <!-- Pagination dots (emulated for static HTML, ideally managed by JS) -->
    <div class="flex justify-center space-x-3 mt-12">
      <span class="block w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
    </div>

  </div>

  <style>
    /* Basic fade-in-up animation for content inside the 'animate-fade-in-up' class */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 1s ease-out forwards;
    }
  </style>
</section>

뉴모픽 Back to Top 버튼(오션 블루)

음악/오디오 플랫폼에 적합한 오션 블루 톤을 사용하여 뉴모픽 스타일로 설계된 간단한 'Back to Top' 버튼 구성 요소입니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
  <!-- Component Wrapper -->
  <a href="#top" class="
      relative z-10 
      p-4 md:p-5 
      rounded-full 
      shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue 
      text-blue-600 dark:text-blue-300 
      hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed 
      active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed 
      transition-all duration-300 ease-in-out 
      focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 
      group
    ">
    <svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
    </svg>

    <!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
    <!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
    </svg> -->
  </a>

  <!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
  <style>
    /* Light mode */
    .shadow-neumorphic-light-blue {
      box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
    }
    .shadow-neumorphic-light-blue-pressed {
      box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
    }

    /* Dark mode */
    .dark .shadow-neumorphic-dark-blue {
      box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
    }
    .dark .shadow-neumorphic-dark-blue-pressed {
      box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
    }
  </style>
</div>

파일 뷰어 구성 요소 - 음악/오디오

음악 및 오디오 플랫폼용으로 설계된 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 생생한 색상과 다크 모드를 지원하는 머티리얼 디자인 미학을 특징으로 합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex">
    <!-- Left Pane: Navigation/Categories -->
    <div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-gray-900">
      <h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-400">My Music</h2>
      <ul class="space-y-3">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl bg-blue-100 text-blue-900 dark:bg-blue-800 dark:text-blue-100 font-semibold shadow-md transition-all duration-300 hover:bg-blue-200 dark:hover:bg-blue-700">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
            Home
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></svg>
            Playlists
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
            Albums
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            Artists
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9c0-4.97-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1-8V7h2v4h4v2h-4v4h-2v-4H7v-2h4z"></path></svg>
            Add New
          </a>
        </li>
      </ul>
    </div>

    <!-- Right Pane: Main Content -->
    <div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-extrabold text-indigo-900 dark:text-indigo-400">Recently Played</h1>
        <div class="flex items-center space-x-3">
          <input type="text" placeholder="Search music..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-500 transition-all duration-300 w-32 sm:w-48 md:w-64">
          <button class="p-2 rounded-full bg-violet-600 text-white shadow-lg transform active:scale-95 transition-all duration-200 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zM3 11V9h10v2H3zm0 3h7v2H3v-2zM3 7h14V5H3v2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- File/Track Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 flex-grow">

        <!-- Track Card 1 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=1" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Journey's End</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Melodies of the Sky</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">3:45</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 2 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=2" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Echoes of the Past</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">The Whispering Woods</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">4:10</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 3 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=3" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Moonlit Serenade</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nightfall Orchestra</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">5:00</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 4 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=4" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">City Lights Dream</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Urban Harmonics</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">3:15</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 5 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=5" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Forest Lullaby</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nature's Symphony</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">2:58</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

      </div>

      <!-- Paginator (Example) -->
      <div class="flex justify-center mt-8">
        <nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            <span class="sr-only">Previous</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="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-600 text-sm font-medium text-white z-10 dark:border-indigo-500 dark:bg-indigo-600">
            1
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            2
          </a>
          <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            3
          </a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">...
          </span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            10
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            <span class="sr-only">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.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>

    </div>
  </div>

  <!-- Floating Action Button (FAB) / Global Player Control -->
  <div class="fixed bottom-6 right-6 z-50">
    <button class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-400 to-cyan-600 text-white flex items-center justify-center shadow-2xl transform active:scale-90 transition-all duration-300 hover:shadow-cyan-400/50 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-cyan-700">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
      <span class="sr-only">Play Now</span>
    </button>
  </div>

</div>

Neon_Glow_Gaming_Breadcrumb

게임 웹 사이트용으로 설계된 복잡하고 반응이 빠른 이동 경로 탐색 구성 요소로, 흑백 베이스와 생생한 강조 색상의 네온/글로우 효과를 특징으로 합니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.

열다 미리 보기

                <nav class="bg-black text-white py-4 px-6 sm:px-8 lg:px-12 dark:bg-gray-950" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4 text-sm sm:text-base font-semibold">
    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-pulse" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 001 1h3M14 4v7h-6V4m6 0H9m7 0-.55-.55z"></path></svg>
        Home
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-bounce" 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="M16 4h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m4-2v4m0-4h.01M16 4h-4m-4 0H8m0 0v4m0-4h.01L14 10l-2 2h-4l-2 2h-4v4h16V6"></path></svg>
        Games
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-spin-slow" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        Genre: Action
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center">
      <span class="text-cyan-400 drop-shadow-[0_0_8px_rgba(0,255,255,0.7)] relative transition-all duration-300">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 animate-pulse" 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.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.93L12 21.05l9.08-6.12A12.01 12.01 0 0021.08 6.982z"></path></svg>
        Cyberpunk 2077
      </span>
    </li>
  </ol>
</nav>
<style>
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .animate-spin-slow {
    animation: spin-slow 5s linear infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 5px rgba(0,255,255,0.5); }
    50% { opacity: 0.7; text-shadow: 0 0 15px rgba(0,255,255,1); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce:hover {
    animation: bounce 0.6s infinite;
  }

  /* Dark mode specific glows */
  .dark .group-hover\:drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\]:hover {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
  .dark .text-cyan-400.drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
</style>

Glassmorphism 위시리스트 컴포넌트

음악/오디오 플랫폼을 위한 단순하고 반응이 빠른 글래스모피즘 스타일의 위시리스트 컴포넌트로, 블러 효과가 있는 젖빛 유리와 같은 반투명 요소와 다크 모드를 지원하는 코퍼레이트 블루 색상 구성표를 특징으로 합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-xl shadow-2xl backdrop-blur-md bg-white/30 dark:bg-blue-900/30 border border-white/40 dark:border-blue-700/40 transform scale-100 transition-all duration-300 hover:scale-[1.01]">
    <h2 class="text-2xl md:text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-6 text-center tracking-tight drop-shadow-sm">Your Wishlist</h2>

    <div class="space-y-4">

      <!-- Item 1 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/1043/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Ocean Dreams</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Artist Name Here</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/10/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">City Lights</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Another Band Project</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
        <img src="https://picsum.photos/id/1018/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
        <div class="ml-4 flex-grow">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Whispering Woods</p>
          <p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">The Soloist</p>
        </div>
        <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <p class="text-center text-sm text-blue-800 dark:text-blue-200 mt-8 opacity-70">Saved your favorite tracks.</p>
  </div>
</div>

Glassmorphism_Pagination_CRM

파스텔 색상의 단순하고 반응이 빠른 유리 모피즘 스타일의 페이지 매김 구성 요소로, 다크 모드 지원을 포함하여 CRM/비즈니스 도구에 적합합니다.

열다 미리 보기

                <nav class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-[150px] sm:min-h-[200px] md:min-h-[250px] lg:min-h-[300px]">
  <ul class="flex items-center space-x-2 sm:space-x-4 bg-white/30 backdrop-blur-md rounded-xl p-3 sm:p-4 shadow-lg border border-white/20 dark:bg-gray-700/30 dark:border-gray-600/20">
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        <svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
        Prev
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        1
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-purple-800 bg-purple-200/60 rounded-lg ring-1 ring-inset ring-purple-300 dark:text-purple-200 dark:bg-purple-700/60 dark:ring-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200 ease-in-out">
        2
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        3
      </a>
    </li>
    <li>
      <span class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200">
        ...
      </span>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        10
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        Next
        <svg class="h-4 w-4 sm:h-5 sm:w-5 ml-1 sm:ml-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Chat Window 구성 요소

따뜻한 일몰 톤의 심플하고 반응이 빠른 머티리얼 디자인에서 영감을 받은 채팅 창 구성 요소로 비즈니스 및 기업 웹사이트에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col h-[700px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-md lg:max-w-lg">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 text-white shadow-md">
        <div class="flex items-center space-x-3">
            <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div>
                <h3 class="text-lg font-semibold">Olivia Martin</h3>
                <p class="text-sm opacity-90">Online</p>
            </div>
        </div>
        <button class="p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white">
            <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hello! How can I assist you today regarding your last order?</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:05 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hi Olivia, I have a question about the shipping status. My order number is #12345.</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:07 AM</span>
            </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Certainly! Let me check that for you. Please wait a moment.</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:08 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Thanks!</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:09 AM</span>
            </div>
        </div>
    </div>

    <!-- Message Input -->
    <div class="p-4 bg-white dark:bg-gray-800 flex items-center space-x-3 border-t border-gray-200 dark:border-gray-700">
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 shadow-inner transition-colors duration-200">
        <button class="bg-orange-500 dark:bg-orange-600 text-white p-3 rounded-full hover:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 shadow-md transition-colors duration-200">
            <svg class="w-6 h-6 -rotate-45" 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 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
        </button>
    </div>
</div>

검색 구성 요소

카테고리

모든 구성 요소