ProductGalleryComponent
Galleria prodotti Componente con design brutalista, supporto per modalità reattiva e scura.
Codice HTML
<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>Componenti correlati
Componente della galleria dei prodotti
Un componente della galleria di prodotti progettato in stile Material Design con una combinazione di colori triadica. È dotato di layout basati su griglia, animazioni reattive e supporta il tema scuro. La galleria include immagini e avatar ed è adatta per una dashboard.
Componente della galleria dei prodotti
Un componente della galleria di prodotti con un design brutalista, una combinazione di colori in scala di grigi e una complessità moderata. È progettato per uno scopo di dashboard ed è reattivo con supporto per il tema scuro.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con lo stile di design Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri. Mostra le immagini dei prodotti e gli avatar degli utenti.