Composant de nuage de balises Art Déco
Un composant de nuage de balises réactif conçu avec une esthétique Art déco, avec des motifs géométriques et des tons bleus luxueux, adapté aux interfaces de médias sociaux. Inclut la prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 rounded-3xl shadow-xl overflow-hidden relative p-6 sm:p-10 border-4 border-blue-500 dark:border-blue-700 transform transition-all duration-300 hover:scale-[1.01]">
<!-- Art Deco Background Pattern -->
<div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none overflow-hidden">
<svg class="absolute w-[150%] h-[150%] left-[-25%] top-[-25%]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0 L5 0 L5 5 L0 5 Z M5 5 L10 5 L10 10 L5 10 Z" fill="rgba(0,0,0,0.1)"/>
<path d="M5 0 L10 0 L10 5 L5 5 Z M0 5 L5 5 L5 10 L0 10 Z" fill="rgba(0,0,0,0.05)"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
</svg>
<div class="absolute inset-0 bg-gradient-to-t from-transparent to-white dark:to-transparent opacity-10"></div>
</div>
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-blue-900 dark:text-blue-100 mb-6 sm:mb-8 tracking-wider uppercase drop-shadow-md">
<span class="block">Explore Topics</span>
<span class="inline-block bg-blue-700 dark:bg-blue-300 h-1 w-20 rounded-full my-2 sm:my-3"></span>
</h2>
<div class="flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
<!-- Individual Tags -->
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Tech
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-400 dark:border-blue-600
hover:bg-blue-300 dark:hover:bg-blue-600
hover:text-blue-900 dark:hover:text-white
font-bold text-base sm:text-lg
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Design
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Coding
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-200 dark:border-blue-800
hover:bg-blue-100 dark:hover:bg-blue-850
hover:text-blue-900 dark:hover:text-white
font-medium text-xs sm:text-sm
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#WebDev
<svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-300 dark:bg-blue-600 text-blue-900 dark:text-white px-5 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-500 dark:border-blue-500
hover:bg-blue-400 dark:hover:bg-blue-500
hover:text-blue-950 dark:hover:text-white
font-extrabold text-lg sm:text-xl
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#SocialMedia
<svg class="ml-2 w-5 h-5 text-blue-700 dark:text-blue-300 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Trends
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-200 dark:border-blue-800
hover:bg-blue-100 dark:hover:bg-blue-850
hover:text-blue-900 dark:hover:text-white
font-medium text-xs sm:text-sm
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Community
<svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Networking
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-400 dark:border-blue-600
hover:bg-blue-300 dark:hover:bg-blue-600
hover:text-blue-900 dark:hover:text-white
font-bold text-base sm:text-lg
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Digital
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</div>
<!-- Custom Styles for Bounce Animation (can be in a <style> tag or utility class if possible) -->
<style>
@keyframes bounceX {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
.group-hover\:animate-bounceX {
animation: bounceX 0.6s ease-in-out infinite;
}
/* Dark mode pattern adjustment if using external CSS, otherwise Tailwind's dark: prefix handles colors */
/* If you want the SVG pattern to change opacity specifically for dark mode, this would be the place */
/* or use inline style for a more dynamic change with JS if needed, but per requirements, stick to CSS */
</style>Composants associés
Composant de nuage de balises Neumorphism
Un composant de nuage de balises réactif avec un design Neumorphism, une palette de couleurs pastel et des interactions complexes, conçu pour le commerce électronique. Inclut la prise en charge du mode sombre et utilise Tailwind CSS.
Composant de nuage de balises Bauhaus
Un composant complexe et réactif de nuage de balises avec un design inspiré du Bauhaus, utilisant des neutres froids, adapté aux plates-formes éducatives avec prise en charge du mode sombre.
Composant de nuage de balises 13
Un composant Tag Cloud conçu avec le style Neumorphism. Il présente un style d’interface utilisateur doux avec des éléments semblant s’extruder de l’arrière-plan à l’aide d’ombres subtiles. Le composant prend en charge le responsive design et les thèmes sombres.