Charts Component
A responsive charts component designed in skeuomorphism style with a grayscale color scheme and dark mode support, ideal for e-commerce applications.
HTML Code
<div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
<div class="flex justify-between">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
</div>
</div>
</div>
<div class="flex justify-between mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
</div>
</div>
</div>
</div>Related Components
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.
VibrantGlassmorphismChart
A simple Glassmorphism chart component with vibrant colors, suitable for blogs and content sites. The component is responsive and includes dark theme support using Tailwind CSS.