Composant d’affichage des prix
Composant d’affichage des prix de style 3D qui prend en charge le mode sombre et les effets réactifs, mettant en valeur les détails du prix du produit.
HTML Code
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
<div class="flex flex-row items-baseline mb-4">
<span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
</div>
<button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
</div>
</div>Composants associés
Composant d’affichage des prix
Un composant d’affichage de prix réactif avec un style Neumorphisme et une palette de couleurs complémentaire, conçu pour le contenu de blog avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix de style Neumorphism avec une palette de couleurs complémentaires (orange doux et bleu clair), d’une complexité modérée pour le commerce électronique. Il présente un design réactif avec prise en charge du thème sombre. Le composant affiche une image, un titre et un prix du produit à l’aide d’un bouton « Ajouter au panier ». Le mode sombre utilise des couleurs complémentaires désaturées.
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.