Composant d’info-bulle
Un composant d’info-bulle complexe, réactif, pris en charge par un thème sombre, pour les tableaux de bord utilisant Tailwind CSS. Pas besoin de JavaScript, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et randomuser.me.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative flex items-center group">
<button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
dark:from-blue-700 dark:to-indigo-800
font-bold text-lg
relative overflow-hidden
before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
hover:before:opacity-20
after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
hover:after:opacity-100
">
Hover for Dashboard Insights
</button>
<div class="absolute bottom-full mb-6 w-96 p-6
bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
text-gray-900 dark:text-gray-100
rounded-2xl shadow-skeuomorphic
opacity-0 group-hover:opacity-100 transition-opacity duration-500
transform translate-y-4 group-hover:-translate-y-0
pointer-events-none group-hover:pointer-events-auto
border-t-4 border-l-4 border-gray-300 dark:border-gray-600
overflow-hidden
before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
">
<div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
<div>
<p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
<p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
<p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
</div>
<div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
<p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
<p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
</div>
<div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
<p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
<p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
</div>
<div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
<p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
<p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
</div>
</div>
<div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path>
</svg>
<span>Real-time Data</span>
</div>
</div>
<div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
<div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>
</div>
</div>
</div>
<style>
/* Custom shadow for Skeuomorphism */
.shadow-skeuomorphic {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
}
.dark .shadow-skeuomorphic {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
}
.shadow-inner-skeuomorphic {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}
.dark .shadow-inner-skeuomorphic {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
}
.group:hover .absolute.bottom-full:after {
border-top-color: #A0AEC0; /* Light Gray */
}
.dark .group:hover .absolute.bottom-full:after {
border-top-color: #4A5568; /* Dark Gray */
}
</style>Composants associés
Composant d’infobulle - Art déco Niveaux de gris
Un composant d’info-bulle complexe inspiré de l’Art déco pour la documentation et les sites wiki, avec une palette de couleurs en niveaux de gris, des motifs géométriques et un contenu riche. Entièrement réactif avec prise en charge du mode sombre.
Composant d’info-bulle Micro-interactions
Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.
Infobulle de commerce électronique pastel minimaliste
Composant d’info-bulle pastel minimaliste pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.