ProductGalleryComponent
Product Gallery Component with Brutalist design, responsive and dark mode support.
HTML Code
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=1">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
<p class="mt-1">$16.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=2">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
<p class="mt-1">$21.15</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=3">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=4">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=5">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
<p class="mt-1">$16.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=6">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
<p class="mt-1">$21.15</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=7">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=8">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
</div>
</div>
<style>
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(75, 85, 99, var(--tw-text-opacity));
}
.body-font {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.-m-4 {
margin: -1rem;
}
.lg\:w-1\/4 {
width: 25%;
}
.md\:w-1\/2 {
width: 50%;
}
.p-4 {
padding: 1rem;
}
.w-full {
width: 100%;
}
.block {
display: block;
}
.relative {
position: relative;
}
.h-48 {
height: 12rem;
}
.rounded {
border-radius: 0.25rem;
}
.overflow-hidden {
overflow: hidden;
}
.object-cover {
object-fit: cover;
}
.object-center {
object-position: center;
}
.mt-4 {
margin-top: 1rem;
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.title-font {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.mb-1 {
margin-bottom: 0.25rem;
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-medium {
font-weight: 500;
}
.mt-1 {
margin-top: 0.25rem;
}
@media (min-width: 768px) {
.md\:-m-4 {
margin: -1rem;
}
.md\:p-4 {
padding: 1rem;
}
}
@media (min-width: 1024px) {
.lg\:-m-4 {
margin: -1rem;
}
.lg\:p-4 {
padding: 1rem;
}
}
/* Brutalism Styles - Example */
.text-gray-600 {
color: black;
}
.text-gray-900 {
color: black;
}
.text-gray-500 {
color: black;
}
.border {
border: 2px solid black;
}
.rounded {
border-radius: 0;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
.dark\:text-white {
color: white;
}
.dark\:text-gray-300 {
color: #d1d5db;
}
.dark\:bg-black {
background-color: black;
}
.dark\:border-white {
border-color: white;
}
}
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
.text-gray-600, .text-gray-900, .text-gray-500 {
color: white;
}
.border {
border-color: white;
}
}
</style>
</section>Related Components
Product Gallery Component - Material Design
A Material Design inspired Product Gallery component with responsive design, hover effects, and dark theme support. Uses Tailwind CSS.
Product Gallery Component
Glassmorphism Product Gallery Component with responsive effects and dark theme support.
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.