Componente de gráficos de esqueuomorfismo
Un componente de gráficos responsivo con estilo Skeuomorphism, colores vibrantes y soporte de modo oscuro para interfaces de redes sociales.
Código 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>
Componentes relacionados
Componente Gráficos
Un componente de gráficos complejo diseñado para aplicaciones web de comercio electrónico en modo oscuro con un esquema de color en escala de grises. Este componente incluye múltiples elementos interactivos como gráficos, puntos de datos, información sobre herramientas y botones, con un diseño responsivo que utiliza Tailwind CSS.
Memphis_Marketplace_Charts_Component
Un componente de gráficos complejo y receptivo con una estética de diseño Memphis, colores complementarios audaces, adecuado para un mercado de múltiples proveedores. Incluye soporte para modo oscuro y elementos interactivos.
Retro_Vintage_Pastel_Social_Charts_Component
Un componente de gráficos complejo y responsivo con una estética retro / vintage de los 80 / 90 con colores pastel, diseñado para plataformas de redes sociales. Incluye soporte para modo oscuro.