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 simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.
Composant de panier d’achat
Un composant de panier d’achat réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
Industrial_Travel_Shopping_Cart
Un composant de panier d’achat complexe et réactif avec une esthétique de design industriel et une palette de couleurs vert forêt, adapté aux sites de réservation de voyages et de tourisme. Inclut la prise en charge du mode sombre, des éléments d’interface riches et du HTML sémantique.