Infobulle monochromatique brutaliste
Un composant d’info-bulle monochromatique complexe, de style brutaliste, conçu pour les sites de blog/de contenu, avec plusieurs éléments interactifs et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
<div class="relative group max-w-sm mx-auto">
<a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
Hover Me
</a>
<div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
<div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
<div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>
<h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
Brutal Tip Title
</h3>
<p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly.
Consider this a visual declaration, not a gentle suggestion.
</p>
<div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
<div>
<p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
<p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
<span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
<span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
</div>
<a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
Read More
</a>
</div>
</div>
</div>
<style>
/* Custom shadows for brutalism style */
.shadow-brutal {
box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
}
.dark .shadow-brutal-dark {
box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
}
.shadow-brutal-sm {
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}
.dark .shadow-brutal-sm-dark {
box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
}
/* Triangle for tooltip */
.group-hover\:block {
left: 50%;
transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
transform-origin: bottom center;
}
.group:hover .group-hover\:block {
transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
}
@media (min-width: 768px) {
.group-hover\:block {
left: 50%;
transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
transform-origin: bottom center;
}
.group:hover .group-hover\:block {
transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
}
}
</style>Composants associés
Composant d’info-bulle
Un composant d’info-bulle minimaliste et plat pour les interfaces de jeu, avec du noir, du blanc et une couleur d’accentuation vive, avec des éléments interactifs complexes et une réactivité totale, y compris la prise en charge du mode sombre.
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 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.