Composant d’affichage des prix
Un composant complexe d’affichage des prix conçu dans un style skeuomorphe imitant les éléments du monde réel, adapté aux blogs et à la consommation de contenu avec une palette de couleurs triadique et un design réactif avec prise en charge du mode sombre.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
<div class="flex-shrink-0">
<span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
<span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
<div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
</div>
<footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
<span class="text-sm">Posted by John Doe</span>
</footer>
</div>Composants associés
Composant d’affichage des prix
Composant d’affichage des prix avec une esthétique rétro/vintage, un design réactif et une prise en charge du mode sombre.
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.
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.