Composants d’affichage du contenu
Un composant simple d’affichage de contenu réactif de style vintage pour le commerce électronique, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.
HTML Code
<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
<p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="text-sm">
<p class="text-gray-100 dark:text-gray-200">Seller Name</p>
<p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
</div>
</div>
<span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
<div class="mt-4">
<button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.
Carte d’annonce immobilière - Pastel suisse
Une carte d’annonce immobilière simple, propre et réactive avec un style typographique suisse/international et une palette de couleurs pastel, adaptée aux plateformes immobilières. Inclut la prise en charge du mode sombre.
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.