Composant d’info-bulle skeuomorphe
Un composant d’info-bulle complexe conçu avec un style skeuomorphe et des tons de terre, adapté aux applications de commerce électronique avec prise en charge du mode sombre.
HTML Code
<div class="relative group">
<img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
<div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
<h3 class="text-lg text-earthgreen-200">Product Name</h3>
<p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
<div class="flex space-x-2 mt-2">
<span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
<span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
</div>
</div>
</div>Composants associés
Composant de l’infobulle du brutalisme
Composant d’infobulle de style brutalisme pour les médias sociaux, avec un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il est réactif et prend en charge le mode sombre en utilisant Tailwind CSS, sans JavaScript.
Composant d’info-bulle
Un composant d’info-bulle de conception de matériaux réactif avec une palette de couleurs monochromatiques pour le commerce électronique, avec prise en charge du mode sombre. Pas de JavaScript, HTML et Tailwind CSS uniquement.
Composant d’infobulle rétro
Un composant d’infobulle à thème rétro/vintage avec des effets réactifs et la prise en charge du mode sombre.