Product Gallery Component
A responsive product gallery component designed for dark mode UI, featuring complementary colors, suitable for social media networking interfaces.
HTML Code
<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>Related Components
Product Gallery Component
A product gallery component designed in Material Design style with a triadic color scheme. It features grid-based layouts, responsive animations, and supports dark theme. The gallery includes images and avatars and is suitable for a dashboard.
Product Gallery Component
A product gallery component with a brutalist design, grayscale color scheme, and moderate complexity. It is designed for a dashboard purpose and is responsive with dark theme support.
Product Gallery Component
Product Gallery Component based on Material Design principles, featuring responsive design and dark theme support. Includes placeholder images.