Компонент Галерея товаров
Адаптивный компонент галереи товаров с темным режимом
HTML-код
<div class="bg-gray-900 py-10">
<div class="container mx-auto px-4">
<h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
<h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
<p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
<button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент Галерея товаров
Сложный, отзывчивый компонент галереи товаров, разработанный с тонкими микровзаимодействиями, пастельной цветовой гаммой и полной поддержкой темного режима, подходящий для форума или платформы сообщества. Имеет интерактивный выбор изображений и подробную информацию о продукте.
Watercolor_Artistic_Dating_Product_Gallery
Сложный, отзывчивый компонент галереи товаров со стилем дизайна «Акварель/Художественный» и цветовой схемой «Конфеты/Сладкое», подходящий для знакомств и социальных платформ. Имеет несколько интерактивных элементов, поддержку темного режима и семантический HTML.
Компонент Галерея товаров
Сложный, отзывчивый компонент галереи товаров с эстетикой 3D-дизайна и цветовой гаммой сепия/коричневый, подходящий для приложений Technology/SaaS. Включает в себя несколько интерактивных элементов и поддержку темного режима.