Компонент Галерея товаров
Адаптивный компонент галереи товаров, предназначенный для музыкальных и аудиоплатформ, с темным пользовательским интерфейсом с лесной/зеленой цветовой палитрой и полной поддержкой темного режима.
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>
Связанные компоненты
Компонент Галерея товаров
Сложный, отзывчивый компонент галереи продуктов со стилем дизайна Neumorphism и дополнительной цветовой схемой, адаптированный для музыкальных/аудио платформ. Включает поддержку темного режима и такие функции, как списки треков, информация об исполнителе и кнопки воспроизведения.
Компонент Галерея товаров
Адаптивный компонент галереи товаров со скевоморфным дизайном, монохромной цветовой схемой и поддержкой темной темы, созданный с помощью Tailwind CSS. Он отличается простой версткой, подходящей для блогов и потребления контента, имитируя реальные элементы с помощью тонких теней и градиентов.
Компонент Галерея товаров
Простой адаптивный компонент галереи товаров, разработанный в соответствии с принципами Material Design, с яркими цветами и поддержкой темного режима, подходящий для панели управления. Этот компонент использует Tailwind CSS для стилизации.