Panier d’achat rétro/vintage
Composant de panier d’achat avec un style rétro / vintage, une palette de couleurs pastel et une complexité simple. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="px-6 py-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
<!-- Cart Item -->
<div class="flex items-center mb-4">
<img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
<div class="flex-grow">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
</div>
<span class="text-gray-700 dark:text-gray-300">x1</span>
</div>
<!-- Cart Item -->
<div class="flex items-center mb-4">
<img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
<div class="flex-grow">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
</div>
<span class="text-gray-700 dark:text-gray-300">x2</span>
</div>
<!-- Total -->
<div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
<p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
<button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Checkout
</button>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat à thème rétro/vintage avec une palette de couleurs monochromatiques, une complexité modérée, un design réactif et une prise en charge du mode sombre. Convient aux sites Web d’entreprise/d’entreprise.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec des micro-interactions et des couleurs analogues, pour les médias sociaux, avec prise en charge du mode sombre à l’aide de Tailwind CSS.