Composant d’affichage des prix
Un composant d’affichage des prix réactif pour un tableau de bord, avec des micro-interactions attrayantes et une palette de couleurs triadique, avec prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
<div class="flex flex-col">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
</div>
</div>
<div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
<h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
<div class="mt-2 flex justify-between items-center">
<button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
</div>
</div>
</div>Composants associés
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.
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.