Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la lista de deseos de Cyberpunk

Un componente complejo de lista de deseos con temática cyberpunk para aplicaciones de criptomonedas/blockchain, con fondos oscuros, acentos en tonos joya neón y un diseño receptivo con soporte para modo oscuro.

Abrir Vista previa

                <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>

Componente de botones para compartir en redes sociales

Botones de compartir en redes sociales inspirados en la Bauhaus para aplicaciones deportivas/de fitness, con formas geométricas y tonos azules. Responsivo con soporte para modo oscuro.

Abrir Vista previa

                <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>

Mega Componente de Menú - Papel/Impresión Retro Crypto

Un mega componente de menú simple y receptivo con un diseño inspirado en el papel / impresión y una paleta de colores retro / vintage, adecuado para aplicaciones de criptomonedas y blockchain. Incluye soporte para modo oscuro.

Abrir Vista previa

                <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>

Componente Deslizador de carrusel

Un componente deslizante de carrusel receptivo con transiciones de color degradadas, diseñado para marcas de moda y belleza. Cuenta con soporte para el modo oscuro y un aspecto elegante y moderno.

Abrir Vista previa

                <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>

Botón neumórfico Volver al principio (azul océano)

Un simple componente de botón 'Back to Top' diseñado con un estilo neumórfico, utilizando tonos azul océano, adecuado para plataformas de música/audio. Es totalmente sensible y es compatible con el modo oscuro.

Abrir Vista previa

                <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>

Componente Visor de archivos - Música/Audio

Un componente de visor de archivos complejo y receptivo diseñado para plataformas de música y audio, con una estética de diseño de materiales con colores vibrantes y compatibilidad con el modo oscuro.

Abrir Vista previa

                <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

Un componente de navegación de migas de pan complejo y receptivo diseñado para sitios web de juegos, con efectos de neón/brillo con una base en blanco y negro y un color de acento vibrante. Incluye soporte para modo oscuro y HTML semántico.

Abrir Vista previa

                <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>

Componente de lista de deseos de Glassmorphism

Un componente de lista de deseos simple y receptivo de estilo glassmorphism para plataformas de música/audio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y un esquema de color azul corporativo, con soporte para modo oscuro.

Abrir Vista previa

                <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

Un componente de paginación simple, receptivo, de estilo glassmorphism con colores pastel, adecuado para CRM/Business Tools, incluido el soporte de modo oscuro.

Abrir Vista previa

                <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>

Componente de ventana de chat

Un componente de ventana de chat simple, receptivo, inspirado en Material Design con tonos cálidos al atardecer, adecuado para sitios web comerciales y corporativos, compatible con el modo oscuro.

Abrir Vista previa

                <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>

Componentes de búsqueda

Categorías

Todos los componentes