Composants Affichage des prix Composant d’affichage des prix

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.

Aperçu

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 des prix sur le thème rétro/vintage pour le e-commerce, avec une palette de couleurs triadique. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, construit avec Tailwind CSS.

Ouvrir

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.

Ouvrir

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.

Ouvrir