Компонент Галерея товаров
Адаптивный компонент галереи товаров, разработанный для пользовательского интерфейса темного режима, с дополнительными цветами, подходящий для интерфейсов социальных сетей.
HTML-код
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 1</h3>
<p class="text-gray-300">Description of product 1 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by John Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 2</h3>
<p class="text-gray-300">Description of product 2 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Jane Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 3</h3>
<p class="text-gray-300">Description of product 3 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Alex Smith</span>
</div>
</div>
</div>
<!-- Additional Product Items can go here -->
</div>
</div>Связанные компоненты
Компонент Галерея продуктов - Material Design
Компонент Галереи товаров, вдохновленный Material Design, с адаптивным дизайном, эффектами наведения и поддержкой темных тем. Использует CSS Tailwind.
Компонент Галерея товаров
Адаптивный компонент галереи товаров, выполненный в стиле брутализм с пастельной цветовой гаммой, подходящей для социальных сетей. Он отличается высокой контрастностью, смелыми элементами дизайна и оптимизирован для темного режима.
Компонент Галерея товаров
Отзывчивая галерея товаров в стиле ретро/винтаж с поддержкой темного режима. Он включает в себя изображения и аватары, сгенерированные из сервисов-заполнителей.