Componentes de búsqueda

Categorías

Componentes Lista de desafíos

Lista de desafíos

Lista de productos guardados para consideración futura

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

Wishlist_Component

Un componente de lista de deseos complejo, de color triádico, corporativo/profesional, adecuado para un tablero, con diseño receptivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 sm:mb-8 text-center sm:text-left">
      Your Wishlist
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Filter/Sort Sidebar for larger screens -->
      <aside class="md:col-span-1 hidden md:block">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 space-y-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters & Sort</h3>

          <div>
            <label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
            <select id="sort-by" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
              <option>Date Added (Newest)</option>
              <option>Price (Low to High)</option>
              <option>Price (High to Low)</option>
              <option>Alphabetical (A-Z)</option>
            </select>
          </div>

          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</p>
            <div class="space-y-2">
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Electronics</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Home Goods</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Books</span>
              </label>
              <label class="flex items-center text-gray-900 dark:text-gray-100">
                <input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
                <span class="ml-2">Apparel</span>
              </label>
            </div>
          </div>

          <div>
            <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer thumb-blue-500 dark:thumb-blue-400">
            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
              <span>$0</span>
              <span>$1000+</span>
            </div>
          </div>

          <button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Apply Filters
          </button>
        </div>
      </aside>

      <!-- Main content area for wishlist items -->
      <div class="md:col-span-2 lg:col-span-3">
        <!-- Responsive Filter/Sort Bar for smaller screens -->
        <div class="flex flex-col sm:flex-row justify-between items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-6 md:hidden border border-gray-200 dark:border-gray-700">
          <div class="w-full sm:w-1/2 mb-4 sm:mb-0">
            <label for="mobile-sort-by" class="sr-only">Sort By</label>
            <select id="mobile-sort-by" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
              <option>Sort By: Date Added</option>
              <option>Sort By: Price (Low to High)</option>
              <option>Sort By: Price (High to Low)</option>
              <option>Sort By: Alphabetical (A-Z)</option>
            </select>
          </div>
          <button class="w-full sm:w-auto flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
            Apply Filters
          </button>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Wishlist Item 1 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1015/400/250" alt="Modern Office Chair" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Office Chair</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Ultra-comfortable design for long work hours.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$299.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 2 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/237/400/250" alt="Noise Cancelling Headphones" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Noise-Cancelling Headphones</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive audio experience with superior comfort.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$189.00</span>
                <span class="text-sm text-red-500 dark:text-red-400">Out of Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-gray-400 cursor-not-allowed text-white text-sm rounded-md shadow-md focus:outline-none" disabled>
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 3 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1020/400/250" alt="Smartwatch" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Advanced Smartwatch</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Track your fitness and stay connected.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$349.50</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 4 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1025/400/250" alt="Professional Monitor" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">4K Ultra HD Monitor</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Crisp visuals for productivity and entertainment.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$499.00</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 5 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/id/1018/400/250" alt="Mechanical Keyboard" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Gaming Mechanical Keyboard</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Tactile feedback for ultimate typing and gaming.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$129.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 6 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
            <a href="#" class="block group">
              <img src="https://picsum.photos/seed/picsum/400/250" alt="Wireless Mouse" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
            </a>
            <div class="p-5">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Wireless Mouse</a>
              </h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Precision and comfort for all-day use.</p>
              <div class="flex items-center justify-between mb-4">
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$59.99</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
              </div>
              <div class="flex items-center justify-between">
                <button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                  <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
                  Add to Cart
                </button>
                <button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>

        </div>

        <!-- Pagination/Load More Button -->
        <div class="mt-8 flex justify-center">
          <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium rounded-md shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Load More Items
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de la lista de deseos de la Bauhaus

Un componente de lista de deseos simple y receptivo para productos de moda / belleza diseñado con los principios de Bauhaus, con colores neutros fríos y soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 sm:mb-8 text-center uppercase tracking-wider">
      My Wishlist
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Minimalist Blue Dress</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$89.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Geometric Earrings</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Jewelry</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Bauhaus Inspired Skirt</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$75.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Abstract Print Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Accessories</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$29.00</p>
          </div>
        </a>
      </div>

    </div>

    <!-- Empty State / Call to Action -->
    <div class="mt-12 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-lg mb-4">Ready to add more beauty to your life? Explore our collections!</p>
      <a href="#" class="inline-block px-8 py-3 bg-gray-800 hover:bg-gray-900 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase tracking-wide text-sm rounded-sm transition-colors duration-300 ease-in-out shadow-lg">
        Shop Now
      </a>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos limpio y confiable diseñado para organizaciones sin fines de lucro/benéficas, con un esquema de color triádico y una capacidad de respuesta completa con soporte para modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-blue-700 dark:text-blue-400">
      Your Impact Wishlist
    </h1>

    <p class="text-center text-lg mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed text-gray-600 dark:text-gray-300">
      Every item on this wishlist represents a tangible way you can make a difference. Choose what resonates most with you.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/400/250" alt="Community Garden" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support a Community Garden</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide tools, seeds, and irrigation for a sustainable community garden that feeds local families and teaches valuable skills.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $500</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$310 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 62%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/237/400/250" alt="School Supplies" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Back-to-School Kits for Children</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund essential school supplies, backpacks, and learning materials for underprivileged students, setting them up for success.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $750</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$150 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 20%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/292/400/250" alt="Medical Aid" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Essential Medical Supplies</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide vital medicines, bandages, and hygiene kits to communities lacking access to basic healthcare.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $1200</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$900 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/400/250" alt="Clean Water Access" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Access to Clean Drinking Water</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund the drilling of new wells and water purification systems, bringing safe hydration to remote villages.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $2000</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$1000 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 50%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1074/400/250" alt="Animal Shelter Support" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support for Animal Shelters</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Help provide food, veterinary care, and comfortable habitats for rescued animals awaiting adoption.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $600</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$420 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1084/400/250" alt="Elderly Care" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Warm Meals for Seniors</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide nutritious, hot meals and friendly visits to elderly individuals who are homebound or facing food insecurity.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $900</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$540 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-500 dark:hover:bg-green-600">
        Explore More Ways to Help
      </a>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos simple y receptivo con una estética monoespaciada/reveladora diseñada para aplicaciones deportivas/fitness. Presenta blanco y negro con un color de énfasis, compatibilidad con modo oscuro y utiliza HTML semántico.

Abrir Vista previa

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <header class="bg-gray-900 dark:bg-gray-950 text-emerald-400 p-4 border-b-2 border-emerald-400">
      <h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-center">{'//'} TEAM GEAR WISHLIST</h1>
    </header>

    <div class="p-4 sm:p-6">
      <p class="text-sm mb-4 text-gray-700 dark:text-gray-300">{'#'}items.count=3; {'#'}total_value=$235.97</p>

      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <!-- Wishlist Item 1 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1018/150/150" alt="Basketball">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Basketball // OFFICIAL_SIZE</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} For practice &amp; games. Durable composite leather.</p>
            <p class="text-base font-bold mt-1">$59.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>

        <!-- Wishlist Item 2 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/237/150/150" alt="Running Shoes">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Running Shoes // ATHLETE_MODEL</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Lightweight, high-performance trainers.</p>
            <p class="text-base font-bold mt-1">$129.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>

        <!-- Wishlist Item 3 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1004/150/150" alt="Water Bottle">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Water Bottle // INSULATED_XL</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Keeps drinks cold for hours. BPA-free.</p>
            <p class="text-base font-bold mt-1">$29.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>
      </ul>

      <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
        <p class="text-lg font-bold uppercase text-gray-800 dark:text-gray-200 mb-2 sm:mb-0">{'TOTAL: '} <span class="text-emerald-500 dark:text-emerald-400">$235.97</span></p>
        <button class="px-6 py-3 bg-emerald-500 text-white font-bold rounded-md uppercase hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
          ADD MORE ITEMS //
        </button>
      </div>
    </div>
  </div>
</div>

RetroWishlistComponent

Un componente de lista de deseos simple y receptivo con una estética retro / vintage, combinación de colores otoñal y compatibilidad con modo oscuro, adecuado para sitios de documentación o base de conocimientos.

Abrir Vista previa

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-900 text-stone-800 dark:text-stone-200 border-t-4 border-amber-800 dark:border-amber-600 rounded-lg shadow-md max-w-4xl mx-auto">
  <div class="flex items-center mb-4">
    <svg class="w-8 h-8 mr-3 text-amber-700 dark:text-amber-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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
    </svg>
    <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-amber-800 dark:text-amber-300 font-mono">Wish List</h2>
  </div>

  <p class="text-sm sm:text-base mb-6 text-stone-700 dark:text-stone-300">
    This is your personalized collection of items you're interested in. Click 'Add to Cart' to make them yours!
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Wishlist Item 1 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Vintage Record Player</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Classic design with modern capabilities. Enjoy your favorite vinyls.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$199.99</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Retro Gaming Console</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Relive the 8-bit era with this multi-game console.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$79.50</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

  </div>

  <div class="text-center mt-8 pt-6 border-t border-amber-200 dark:border-zinc-700 text-sm italic text-stone-500 dark:text-stone-400">
    More items coming soon to your list!
  </div>
</div>

Lista de deseos Componente Inmobiliario

Un componente de lista de deseos sensible y de alto contraste para propiedades inmobiliarias, inspirado en los principios de Material Design, con soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 text-center">
      Your Wishlist
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Property Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Modern House With Large Windows">
          <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Luxury Villa with Ocean View</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">123 Ocean Blvd, Malibu, CA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 2,500 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$2,500,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Apartment Complex with City View">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Chic Downtown Loft</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 City St, New York, NY</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,200 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$850,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1025/600/400" alt="Suburban Family House">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Spacious Family Home with Garden</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">789 Evergreen Ln, Suburbia, TX</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 5 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 3,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$650,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1037/600/400" alt="Small Countryside Cottage">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Cozy Countryside Retreat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 Rural Rd, Countryside, GA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$380,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

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

Wishlist_Component

Un componente de lista de deseos receptivo y artístico para aplicaciones deportivas / fitness, con una paleta de colores verde bosque, con texturas suaves y pintadas y soporte para modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-900 bg-emerald-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.005]">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-100 dark:border-gray-700">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-900 dark:text-emerald-100 mb-4 tracking-tight drop-shadow-md">Your Fitness Wishlist</h2>
      <p class="text-lg text-emerald-700 dark:text-emerald-300 max-w-2xl leading-relaxed">
        Curate your dream gear and activities. Add items you're eyeing or experiences you aspire to conquer.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Wishlist Item 1 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=1" alt="Trail Running Shoes" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Trail Running Shoes</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, durable, and grippy for conquering any terrain. Essential for trail adventures.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$149.99</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=2" alt="Smart Sports Watch" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Smart Sports Watch</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Track your performance, heart rate, and GPS with this advanced fitness companion.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$299.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=3" alt="Yoga Mat" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Premium Yoga Mat</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Thick, non-slip, and eco-friendly. Perfect for deep stretches and challenging poses.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$59.50</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=4" alt="Resistance Bands Set" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Resistance Bands Set</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Versatile for strength training, stretching, and physical therapy. All levels.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$34.99</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=5" alt="Aero Cycling Helmet" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Aero Cycling Helmet</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, aerodynamic design for speed and safety on your rides.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$99.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=6" alt="Hydration Backpack" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Hydration Backpack</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Stay hydrated on long runs or hikes with this lightweight, comfortable pack.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$75.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-emerald-100 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
      <p class="text-emerald-700 dark:text-emerald-300 text-center sm:text-left mb-4 sm:mb-0">
        Ready to make your fitness dreams a reality? Start adding items!
      </p>
      <button class="px-8 py-3 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-emerald-600 dark:hover:bg-emerald-700">
        Discover More Gear
      </button>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos receptivo para consultoría/servicios, con principios de diseño de materiales, un esquema de color neón/eléctrico y compatibilidad con el modo oscuro. Muestra servicios con imágenes, títulos, descripciones y un botón 'Solicitar cotización', junto con un botón 'Eliminar' para artículos.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-zinc-900 dark:text-white leading-tight" style="text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF, 0 0 20px #00FFFF;">
      Your <span class="text-cyan-500 dark:text-cyan-400">Service</span> Wishlist
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Item 1 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-cyan-400 dark:hover:border-cyan-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=1" alt="Strategic Planning" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(0,255,255,0.3);">Strategic Planning</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Develop robust strategies that align with your business goals, ensuring long-term growth and success in competitive markets.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$1200 - $3500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/40 dark:shadow-cyan-700/60
                           hover:from-cyan-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Strategic Planning">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-lime-400 dark:hover:border-lime-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=2" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(128,255,0,0.3);">Digital Transformation</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Guide your organization through the complexities of digital evolution, leveraging technology for enhanced efficiency and innovation.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-lime-600 dark:text-lime-400">$2000 - $5000</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-lime-500 to-green-600 shadow-lg shadow-lime-500/40 dark:shadow-lime-700/60
                           hover:from-lime-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Digital Transformation">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-fuchsia-400 dark:hover:border-fuchsia-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=3" alt="Operations Optimization" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,0,255,0.3);">Operations Optimization</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Streamline your operational processes for maximum efficiency, reducing costs and improving overall productivity.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-fuchsia-600 dark:text-fuchsia-400">$900 - $2800</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-fuchsia-500 to-purple-600 shadow-lg shadow-fuchsia-500/40 dark:shadow-fuchsia-700/60
                           hover:from-fuchsia-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Operations Optimization">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 4 (Example additional item) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=4" alt="Market Research" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,165,0,0.3);">Market Research</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Gain deep insights into market trends, customer behavior, and competitive landscapes to inform your strategic decisions.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-orange-600 dark:text-orange-400">$800 - $2500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-orange-500 to-red-600 shadow-lg shadow-orange-500/40 dark:shadow-orange-700/60
                           hover:from-orange-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Market Research">
              Request Quote
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 mb-4">
      <button class="px-8 py-4 rounded-full text-lg font-bold text-white transition-all duration-300 transform hover:scale-105 active:scale-95 selection:from-sky-400 selection:to-blue-400
                     bg-gradient-to-br from-indigo-600 to-purple-700 shadow-2xl shadow-indigo-500/50 dark:shadow-indigo-700/70
                     hover:from-indigo-700 hover:to-purple-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900">
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>