Компонент Галерея товаров
Адаптивный компонент галереи товаров с эстетикой Material Design, с макетом на основе сетки и интерактивными элементами, подходящими для демонстрации продуктов или портфолио. Включает поддержку темного режима и использует аналогичную цветовую схему.
HTML-код
<div class="container mx-auto p-4"">
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
<div class="p-4"">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
</div>
</div>
Связанные компоненты
Компонент Галерея товаров
Сложный, отзывчивый компонент галереи продуктов со стилем дизайна Neumorphism и дополнительной цветовой схемой, адаптированный для музыкальных/аудио платформ. Включает поддержку темного режима и такие функции, как списки треков, информация об исполнителе и кнопки воспроизведения.
Компонент Галерея товаров
Компонент галереи товаров, выполненный в стиле Material Design с триадической цветовой гаммой. Он имеет макеты на основе сетки, адаптивную анимацию и поддерживает темную тему. Галерея включает в себя изображения и аватары и подходит для панели управления.
Компонент Галерея товаров
Адаптивный компонент галереи товаров, предназначенный для музыкальных и аудиоплатформ, с темным пользовательским интерфейсом с лесной/зеленой цветовой палитрой и полной поддержкой темного режима.