Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
Une fiche produit simple, de style brutaliste, pour un site Web d’agriculture/élevage en ligne avec une palette de couleurs rétro, avec une image de produit, un titre, un prix et un bouton d’ajout au panier. Conçu avec une prise en charge de la réactivité et du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
<div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
<div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
<img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
<div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
NEW
</div>
</div>
<div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
<a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
Heirloom Seed Pack
</a>
<p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
Premium quality heirloom seeds for robust yields and sustainable farming.
</p>
<div class="flex items-baseline justify-between mb-6">
<span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
$19.99
</span>
<span class="text-sm text-stone-500 dark:text-stone-400 line-through">
$24.99
</span>
</div>
<button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
Add to Cart
</button>
</div>
</div>
</div>Composants associés
Composant Composants de commerce électronique
Composant de commerce électronique pour un site Web d’entreprise minimaliste, avec un design réactif et une prise en charge du thème sombre.
Industrial_Sunset_Ecommerce_Component
Composant de commerce électronique complexe avec un style de design industriel, une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.
Industrial_Monochrome_Blog_Card
Une carte de consommation de blog/contenu complexe et réactive à l’esthétique industrielle, utilisant une palette de couleurs noir/blanc avec un seul accent vif. Comprend des éléments exposés et un design utilitaire, avec prise en charge du mode sombre.