Product Gallery Component
A responsive product gallery component designed in a brutalism style with a pastel color scheme suitable for social media. It features high contrast, bold design elements and is optimized for dark mode.
HTML Code
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
</div>
</div>Related Components
Product Gallery Component
A simple product gallery component designed with 3D elements for depth, using a triadic color scheme. It's responsive and supports dark theme, suitable for showcasing work or products.
Product Gallery Component
A responsive product gallery with a retro/vintage aesthetic, featuring dark mode support. It includes images and avatars generated from placeholder services.
Product Gallery Component
A simple, responsive product gallery component with a glassmorphism design style, black and white color scheme with a bright accent, suitable for job boards or career platforms. Includes dark mode support.