Composant d’affichage du contenu
Un composant d’affichage de contenu conçu dans un style skeuomorphe pour le commerce électronique avec un thème sombre. Il présente des produits avec un minimum d’éléments, en utilisant une palette de couleurs analogue pour une esthétique agréable.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="flex flex-col justify-center items-center">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
<p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
</div>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu simple et réactif conçu dans un style brutaliste avec des couleurs complémentaires. Convient aux sites Web d’entreprise / d’entreprise, prenant en charge le mode sombre.
SimpleContentDisplay
Un composant d’affichage de contenu simple avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’affichage du contenu
Un composant simple d’affichage de contenu réactif pour les interfaces de médias sociaux, conçu avec les principes de conception matérielle et une palette de couleurs triadique.