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
Industrial_Chart_Component_Ocean_Blue_Simple
A simple, responsive chart component with an industrial, raw-materials aesthetic using ocean/blue tones, designed for non-profit/charity organizations. Includes dark mode support.
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.
Sports_Fitness_Charts_Component
A complex, responsive charts component for sports and fitness applications, featuring a clean, minimalist Swiss Typography design with a black and white base and a single accent color. Includes dark mode support and a grid-based layout for various data visualizations.