Composant d’intégration de média
Un composant Media Embed réactif de style Skeuomorphique, utilisant des couleurs de couleur Terre et adapté au commerce électronique, avec prise en charge du thème sombre.
HTML Code
<div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
<div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
<button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
</div>
</div>Composants associés
Composant d’intégration de média skeuomorphe
Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia de style Neumorphism adapté à la consommation de blogs et de contenus, doté d’une palette de couleurs triadique. Conception réactive avec prise en charge du mode sombre.
Composant d’intégration du support Neumorphism
Un composant multimédia d’intégration multimédia neumorphe pour les sites Web d’entreprise, avec un design réactif et une prise en charge du thème sombre utilisant des couleurs complémentaires.