Componente Grafici Skeuomorphism
Un componente grafico reattivo con stile Skeuomorphism, colori vivaci e supporto della modalità scura per le interfacce dei social media.
Codice HTML
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
<div class="flex items-center">
<div class="text-white text-3xl font-bold mr-2">12,345</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
</svg>
</div>
</div>
<div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
<div class="flex items-center">
<div class="text-white text-3xl font-bold mr-2">5,678</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
</svg>
</div>
</div>
<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
<div class="flex items-center">
<div class="text-white text-3xl font-bold mr-2">3,210</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
</svg>
</div>
</div>
<div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
<div class="flex items-center">
<div class="text-white text-3xl font-bold mr-2">45,678</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Grafico delle vendite di Glassmorphism
Un componente grafico semplice e reattivo con uno stile Glassmorphism, una combinazione di colori vivaci e il supporto della modalità scura, adatto per le dashboard di e-commerce.
Componente RetroChartsCharts
Un componente grafico retrò/vintage con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Include immagini segnaposto.
SkeuomorphismChartsComponent
Componente Grafici Skeuomorfi per Social Media con Colori Complementari