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
Composant d’infographie complexe avec conception Neumorphism, schéma de couleurs complémentaire, prise en charge du mode réactif et sombre, pour les entreprises/entreprises, à l’aide de Tailwind CSS.
Composant Infographie
Un composant d’infographie réactif avec de petites animations attrayantes qui répondent aux actions de l’utilisateur avec la prise en charge du thème sombre, créé à l’aide de Tailwind CSS.
Composant Infographie
Un composant infographique simple conçu avec le style Neumorphism et une palette de couleurs pastel. Il affiche une carte de profil et des statistiques de base dans une mise en page visuellement attrayante adaptée aux sites Web d’entreprise ou d’entreprise.