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.
HTML Code
<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<!-- Tooltip Container -->
<div class="group relative flex flex-col items-center">
<!-- User Avatar (Trigger for Tooltip) -->
<img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
<!-- Tooltip Content -->
<div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
<h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
<p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center text-sm mb-2">
<span class="font-semibold">Followers:</span>
<span>1.2M</span>
</div>
<div class="flex justify-between items-center text-sm mb-4">
<span class="font-semibold">Following:</span>
<span>345</span>
</div>
<div class="grid grid-cols-3 gap-2 mb-4">
<img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
<img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
<img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
</div>
<a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
View Profile
</a>
<!-- Brutalist Arrow -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
</div>
</div>
</div>Composants associés
Glassmorphism Monochromatique Simple Infobulle
Un composant d’info-bulle simple, réactif et compatible avec le mode sombre avec un style Glassmorphism, un schéma de couleurs monochromatiques pour les blogs et les sites de contenu.
Memphis_Real_Estate_Tooltip
Un composant d’info-bulle simple et réactif pour les applications immobilières, doté d’une esthétique inspirée du design Memphis avec une base monochrome et une couleur d’accentuation vive. Inclut la prise en charge du mode sombre.
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.