Componente infografica vintage retrò
Un componente reattivo, color pastello, in stile retrò/vintage per la dashboard delle infografiche dei social media costruito con Tailwind CSS, con statistiche del profilo utente, grafico a barre degli hashtag di tendenza e un'immagine illustrativa. Include il supporto per la modalità oscura tramite il prefisso dark: di Tailwind e le animazioni interattive al passaggio del mouse (non è richiesto JavaScript).
Codice HTML
<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>Componenti correlati
RetroInfograficaComponente
Un componente infografico reattivo con un design retrò/vintage, combinazione di colori pastello e supporto per la modalità scura. Utilizza Tailwind CSS per lo stile e include più elementi interattivi per un'interfaccia complessa adatta ai blog e al consumo di contenuti. Include una sequenza temporale, barre di avanzamento, grafici e un invito all'azione, il tutto con un'estetica anni '80/'90 e colori pastello. Utilizza immagini casuali da picsum.photos e randomuser.me per gli avatar.
Componente Infografica
Un componente infografico complesso con uno stile di design Skeuomorphism e una combinazione di colori vibranti, adatto per piattaforme di e-commerce. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Visualizza varie statistiche di prodotto con elementi interattivi.
Componente Infografica
Un semplice componente infografico progettato con lo stile Neumorfismo e una combinazione di colori pastello. Visualizza una scheda del profilo e le statistiche di base in un layout visivamente accattivante adatto per siti Web aziendali o aziendali.