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.
HTML Code
<div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<div class="ml-3">
<h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
</div>
</div>
<h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
<button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>Composants associés
Composant d’affichage des prix
Un composant d’affichage de prix simple et réactif pour les annonces immobilières, avec des couleurs de terre et une prise en charge du mode sombre.
Composant d’affichage des prix
Un composant complexe d’affichage des prix de style rétro-vintage pour les portefeuilles, doté d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composant d’affichage des prix
Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.