Bauhaus_Autumn_Tooltip_Component
Un composant d’infobulle inspiré du Bauhaus avec une palette de couleurs d’automne, conçu pour les marques de mode et de beauté. Dispose d’un design géométrique fonctionnel, d’une réactivité et d’une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-gray-900 p-4 font-sans">
<div class="relative group max-w-sm">
<button class="px-6 py-3 bg-red-800 text-white font-bold uppercase tracking-wider text-sm rounded-none shadow-lg transform transition duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-75 dark:bg-red-900 dark:hover:bg-red-800">
Hover for Details
</button>
<div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-4 w-64 p-4
bg-yellow-800 dark:bg-gray-800
text-white dark:text-gray-200
border-4 border-amber-900 dark:border-gray-700
opacity-0 invisible group-hover:opacity-100 group-hover:visible
transition-opacity duration-300 ease-in-out
group-hover:translate-y-0 transform translate-y-4
shadow-xl z-10
origin-bottom
before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-yellow-800 dark:before:border-t-gray-800">
<h3 class="text-lg font-extrabold mb-2 uppercase tracking-wide text-amber-100 dark:text-gray-100">Luxury Serum X</h3>
<p class="text-sm leading-relaxed mb-3 text-amber-200 dark:text-gray-300">
Unlock radiant skin with our concentrated formula. Infused with natural extracts.
</p>
<div class="flex items-center space-x-2 mb-3">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Model" class="w-8 h-8 rounded-none border border-amber-600 dark:border-gray-600 object-cover">
<span class="text-xs font-semibold text-amber-300 dark:text-gray-400">A favorite of beauty influencers!</span>
</div>
<a href="#" class="inline-block px-4 py-2 bg-amber-900 text-amber-100 font-bold text-xs uppercase tracking-wider hover:bg-amber-700 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200">
Shop Now
</a>
</div>
</div>
</div>Composants associés
Infobulle minimaliste
Un composant d’info-bulle de conception minimaliste et plat pour les sites Web de blog/contenu, avec une palette de couleurs monochromatiques et une mise en page simple. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Minimalist_Tooltip
Composant d’info-bulle de conception minimaliste/plate pour le commerce électronique avec un design réactif et une prise en charge du thème sombre. Utilise une palette de couleurs complémentaire et a une complexité modérée.
Composant d’info-bulle de conception matérielle - Réservation/Réservation
Un composant d’infobulle complexe et réactif inspiré de Material Design pour les systèmes de réservation, avec des couleurs sourdes/désaturées, des effets de profondeur et la prise en charge du mode sombre. Il fournit des informations détaillées lors du survol/mise au point.