Charts Component
A complex charts component designed for business and corporate websites, featuring a 3D design, complementary color scheme, and responsive structure with dark mode support.
HTML Code
<div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
<div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
<div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex justify-between items-center mt-6 w-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="ml-3">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
</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.
Charts Component
A responsive 3D styled charts component with dark theme support using Tailwind CSS.