Scheda Prodotto E-commerce Neumorfico
Una scheda prodotto per l'e-commerce semplice e reattiva con uno stile di design neumorfico in scala di grigi, con supporto per la modalità scura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm rounded-2xl p-6 bg-gray-200 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 ease-in-out">
<!-- Product Image -->
<div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 group">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover rounded-xl transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-xl"></div>
<span class="absolute top-3 left-3 px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-semibold rounded-full shadow-inner-light dark:shadow-inner-dark">
New
</span>
</div>
<!-- Product Details -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Stylish Black Headphone</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
Experience immersive sound with active noise cancellation and comfortable ear cups.
</p>
<!-- Price and Rating -->
<div class="flex items-center justify-between mb-6">
<span class="text-2xl font-bold text-gray-900 dark:text-gray-100">$199.99</span>
<div class="flex items-center space-x-1">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.736 4.635 1.123 6.545z"/>
</svg>
<span class="text-sm text-gray-600 dark:text-gray-400">4.8 (120)</span>
</div>
</div>
<!-- Add to Cart Button -->
<button class="w-full py-3 px-6 rounded-xl bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold transition-all duration-300 ease-in-out shadow-custom-button-light dark:shadow-custom-button-dark hover:shadow-custom-button-hover-light dark:hover:shadow-custom-button-hover-dark active:shadow-inner-light active:dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">
Add to Cart
</button>
</div>
</div>
<style>
/* Base Neumorphic Shadows for Light Mode */
.shadow-custom-light {
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}
.shadow-inner-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-custom-button-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-custom-button-hover-light {
box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
/* Neumorphic Shadows for Dark Mode */
.dark .shadow-custom-dark {
box-shadow: 8px 8px 16px #717171, -8px -8px 16px #414141;
}
.dark .shadow-inner-dark {
box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #414141;
}
.dark .shadow-custom-button-dark {
box-shadow: 5px 5px 10px #717171, -5px -5px 10px #414141;
}
.dark .shadow-custom-button-hover-dark {
box-shadow: 7px 7px 14px #717171, -7px -7px 14px #414141;
}
/* Custom Ring Offset for Dark Mode Focus */
.dark\:focus\:ring-offset-gray-900:focus {
box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-offset-color), var(--tw-ring-shadow);
--tw-ring-offset-color: #1a202c;
}
</style>Componenti correlati
Contenitore per e-commerce di Material Design
Un componente contenitore di e-commerce reattivo con una griglia di prodotti, un riepilogo del carrello della spesa e il supporto per il tema scuro, progettato utilizzando i principi di Material Design e una combinazione di colori dei toni della Terra. Presenta più elementi interattivi, tra cui schede prodotto con immagini, titoli, prezzi e pulsanti "Aggiungi al carrello", nonché un riepilogo del carrello appiccicoso che si aggiorna con gli articoli aggiunti. Il layout si adatta alle diverse dimensioni dello schermo e tutti gli elementi hanno stili di modalità oscura definiti con i prefissi Tailwind CSS dark:.
Componente contenitore neumorfico
Un componente contenitore neumorfico reattivo per mostrare lavori o prodotti, progettato con una combinazione di colori triadica e il supporto del tema scuro, utilizzando Tailwind CSS.
Componente contenitore
Un componente contenitore minimalista per un cruscotto che utilizza Tailwind CSS con supporto per la modalità oscura.