Skeuomorphism Charts Component
A responsive charts component with Skeuomorphism style, vibrant colors, and dark mode support for social media interfaces.
HTML Code
<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>
Related Components
Charts Component
A responsive dashboard component demonstrating skeuomorphic design with pastel colors and dark mode support, featuring simulated bar charts, line charts, and key performance indicators using pure HTML and Tailwind CSS. No JavaScript is included; charts are visual representations.
Charts Component
A simple, responsive chart component with pastel colors and dark mode support, designed for blog/content consumption with subtle microinteractions via hover effects. No JavaScript.