Composant d’affichage des prix 22
Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>Composants associés
Composant d’affichage des prix
Un composant d’affichage du prix minimaliste/plat pour une utilisation sur le tableau de bord, avec un design réactif et une prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix inspiré de la 3D avec une palette de couleurs monochromatiques, conçu pour les interfaces de médias sociaux. Il s’agit d’un composant complexe et réactif avec prise en charge du mode sombre, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composant d’affichage des prix
Un composant d’affichage de prix réactif avec une esthétique rétro/vintage et des couleurs vives, adapté aux interfaces de médias sociaux, avec prise en charge du mode sombre.