Composant d’infographie vintage rétro
Un composant de tableau de bord d’infographie de médias sociaux réactif, de couleur pastel, de style rétro/vintage, construit avec Tailwind CSS, avec des statistiques de profil utilisateur, un graphique à barres de hashtag tendance et une image illustrative. Inclut la prise en charge du mode sombre via le préfixe dark : de Tailwind et des animations de survol interactives (aucun JavaScript requis).
HTML Code
<div class="relative max-w-4xl mx-auto p-8 bg-pink-50 dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
<!-- Decorative retro shapes -->
<span class="hidden md:block absolute top-4 left-4 w-12 h-12 bg-blue-100 dark:bg-blue-700 rounded-full"></span>
<span class="hidden md:block absolute top-10 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-700 rotate-45"></span>
<span class="hidden md:block absolute bottom-8 left-16 w-6 h-6 bg-green-100 dark:bg-green-700 rounded-sm"></span>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-purple-700 dark:text-purple-300 mb-2">Retro Social Insights</h2>
<p class="text-md text-gray-700 dark:text-gray-300 mb-6">Your 90s style user engagement dashboard at a glance</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- User Stats Card -->
<div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4 space-y-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"
class="w-12 h-12 rounded-full border-2 border-purple-300 dark:border-purple-600"/>
<div>
<h3 class="text-lg font-bold text-purple-700 dark:text-purple-300">Jane Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">@janedoe</p>
</div>
</div>
<div class="flex justify-between">
<div class="text-center">
<p class="text-2xl font-bold text-blue-500 dark:text-blue-300">1.2k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-green-500 dark:text-green-300">3.4k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-pink-500 dark:text-pink-300">5.6k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Likes</p>
</div>
</div>
</div>
<!-- Trending Hashtags Chart -->
<div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4">
<h4 class="text-purple-700 dark:text-purple-300 font-semibold mb-4">Trending Hashtags</h4>
<ul class="space-y-4">
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#RetroVibes</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">68%</span>
</div>
<div class="w-full bg-purple-200 dark:bg-purple-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-purple-400 dark:group-hover:bg-purple-500 transition-all duration-300 bg-purple-500 dark:bg-purple-300 h-2"
style="width: 68%"></div>
</div>
</li>
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#VintageStyle</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">54%</span>
</div>
<div class="w-full bg-yellow-200 dark:bg-yellow-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-yellow-400 dark:group-hover:bg-yellow-500 transition-all duration-300 bg-yellow-500 dark:bg-yellow-300 h-2"
style="width: 54%"></div>
</div>
</li>
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#Nostalgia</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">42%</span>
</div>
<div class="w-full bg-pink-200 dark:bg-pink-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-pink-400 dark:group-hover:bg-pink-500 transition-all duration-300 bg-pink-500 dark:bg-pink-300 h-2"
style="width: 42%"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- Illustrative Image -->
<div class="mt-6">
<img src="https://picsum.photos/800/200?random=2" alt="Infographic illustration"
class="w-full h-48 object-cover rounded-lg shadow-inner transition-transform duration-300 hover:scale-105"/>
</div>
</div>
</div>
Composants associés
Composant Infographie
Un composant d’infographie simple et réactif avec des éléments de conception 3D et une palette de couleurs analogue pour l’utilisation d’un blog/contenu. Il inclut la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant Infographie
Un composant infographique de complexité modérée pour le gouvernement/les services publics, avec des couleurs de bonbons sucrés et une conception subtile de micro-interaction.
Brutalist_Infographics_Component_Earth_Tones
Un composant graphique d’inspiration brutaliste pour les sites Web d’entreprise, avec une typographie brute, un contraste élevé et des tons de terre. Il est réactif et prend en charge le mode sombre.