Composant Composants multimédias
Un composant multimédia réactif pour le commerce électronique avec Material Design et une palette de couleurs monochromatiques.
HTML Code
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
<div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>Composants associés
Composants multimédias Composante 39
Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Composants multimédias
Un composant multimédia conçu avec le style skeuomorphism à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
Composant Composants multimédias
Un composant multimédia réactif inspiré des styles de design rétro/vintage, avec une esthétique nostalgique des années 80/90. Il prend en charge le thème sombre avec Tailwind CSS et comprend des images et des avatars de remplacement.