Componenti Galleria prodotti Componente della galleria dei prodotti
Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti progettato per piattaforme musicali e audio, caratterizzato da un'interfaccia utente scura con una tavolozza di colori foresta/verde e supporto completo della modalità scura.
Anteprima

Codice HTML

<div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
    <p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>

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

      <!-- Product Card 1 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
          <p class="text-sm text-gray-400 mb-3">Artist Name</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$12.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Ambient</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
          <p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$14.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Folk</span>
            <span>2022</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
          <p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$11.75</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Electronic</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
          <p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$9.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Classical</span>
            <span>2021</span>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
          <p class="text-sm text-gray-400 mb-3">The Root Band</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$13.25</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Indie</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
          <p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$10.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Chillwave</span>
            <span>2022</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
Componenti correlati

Componente della galleria dei prodotti

Una galleria di prodotti reattiva con uno stile retrò/vintage, caratterizzata da una combinazione di colori complementari e progettata per siti Web aziendali/aziendali con supporto per la modalità scura.
Aperto
Componente della galleria dei prodotti

Componente basato sui principi del Material Design, con design reattivo e supporto per temi scuri. Include immagini segnaposto.
Aperto
Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.
Aperto