Charts Component
A brutalist-style charts component for business websites, featuring a triadic color scheme and moderate complexity. It includes responsive design and dark mode support using Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-6xl mx-auto">
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
<h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Chart 1 -->
<div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
<div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
<div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
<div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
<div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
<div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
</div>
<div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
<span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
</div>
</div>
<!-- Chart 2 -->
<div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
<div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
<div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
<div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
<div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
<div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
</div>
<div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
<span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
</div>
</div>
<!-- Chart 3 -->
<div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
<div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
<div class="flex items-end h-full">
<div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
</div>
</div>
<div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
<span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
</div>
</div>
</div>
</div>
<!-- Additional Section for more data or controls -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
<h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
<p class="text-4xl">1.2M</p>
<p>Total Sales</p>
</div>
<div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
<p class="text-4xl">15%</p>
<p>Growth Rate</p>
</div>
<div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
<p class="text-4xl">£250K</p>
<p>Net Profit</p>
</div>
</div>
</div>
</div>
</div>Related Components
Glassmorphism Sales Chart
A simple, responsive chart component with a Glassmorphism style, vibrant color scheme, and dark mode support, suitable for e-commerce dashboards.
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 responsive Charts Component designed with Material Design principles, featuring a pastel color scheme and complex interactivity for showcasing portfolios. It includes support for dark mode with Tailwind CSS classes.