Поиск компонентов

Категории

Компоненты Список желаний

Список желаний

Список продуктов, сохраненных для дальнейшего рассмотрения

Компонент списка желаний Cyberpunk

Сложный компонент списка желаний на тему киберпанка для криптовалют/блокчейн-приложений, отличающийся темным фоном, неоновыми акцентами в оттенках драгоценных камней и адаптивным дизайном с поддержкой темного режима.

Открытый Предварительный просмотр

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

Компонент списка желаний стекломорфизма

Простой, отзывчивый компонент списка желаний в стиле glassmorphism для музыкальных/аудиоплатформ, включающий полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия и фирменной синей цветовой схемой, с поддержкой темного режима.

Открытый Предварительный просмотр

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

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

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

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

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

    </div>

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

Wishlist_Component

Сложный, трехцветный, корпоративный/профессиональный компонент списка желаний, подходящий для приборной панели, с адаптивным дизайном и поддержкой темного режима.

Открытый Предварительный просмотр

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

Компонент списка желаний Баухауса

Простой, отзывчивый компонент списка желаний для модных/косметических товаров, разработанный в соответствии с принципами Баухауза, с холодными нейтральными цветами и поддержкой темного режима.

Открытый Предварительный просмотр

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

Компонент списка желаний

Чистый, заслуживающий доверия компонент списка желаний, предназначенный для некоммерческих/благотворительных организаций, с триадической цветовой схемой и полной отзывчивостью с поддержкой темного режима.

Открытый Предварительный просмотр

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

Компонент списка желаний

Простой, отзывчивый компонент списка желаний с эстетикой монопространства/разработчика, адаптированный для приложений для спорта и фитнеса. Имеет черный и белый цвета с акцентным цветом, поддержку темного режима, использует семантический HTML.

Открытый Предварительный просмотр

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

РетроWishlistComponent

Простой, отзывчивый компонент списка желаний с ретро/винтажной эстетикой, осенней цветовой гаммой и поддержкой темного режима, подходящий для документации или сайтов баз знаний.

Открытый Предварительный просмотр

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

Компонент недвижимости в списке желаний

Отзывчивый и высококонтрастный компонент списка желаний для объектов недвижимости, вдохновленный принципами Material Design, с поддержкой темного режима.

Открытый Предварительный просмотр

                <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

Отзывчивый и художественный компонент списка желаний для спортивных и фитнес-приложений, выполненный в цветовой палитре зеленого леса, с мягкими окрашенными текстурами и поддержкой темного режима.

Открытый Предварительный просмотр

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

Компонент списка желаний

Адаптивный компонент списка желаний для консалтинга/услуг, включающий принципы Material Design, цветовую схему Neon/Electric и поддержку темного режима. Он отображает услуги с изображениями, названиями, описаниями и кнопкой «Запросить цену», а также кнопкой «Удалить» для товаров.

Открытый Предварительный просмотр

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