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 reattivo della galleria di prodotti progettato con i principi del Material Design, con colori color terra, adatto per i cruscotti e che supporta la modalità scura.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.