Neumorphic Charts Component
A complex, responsive charts component with a neumorphic design style and an analogous color scheme, suitable for a portfolio to showcase work or products. Includes dark mode support.
HTML Code
<div class="min-h-screen p-6 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Main Neumorphic Card Container -->
<div class="bg-purple-100 dark:bg-gray-850 p-8 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-500 ease-in-out">
<header class="mb-10 text-center">
<h1 class="text-4xl font-extrabold text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">Portfolio Performance Overview</h1>
<p class="text-lg text-purple-700 dark:text-purple-300">Visualize your progress with interactive, soft UI charts.</p>
</header>
<!-- Analytics Cards Section -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<!-- Card 1 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-red-300 dark:from-pink-600 dark:to-red-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.594l2.25-1.5m-6.003.468L18.75 7.5h-1.091c-.389 0-.711-.29-.757-.679A9.795 9.795 0 0014.25 2.25H6.05a4.5 4.5 0 00-4.5 4.5v11.751m12 0a4.5 4.5 0 00-4.5 4.5v.525A.75.75 0 0110.125 22.5h3.75a.75.75 0 01.75-.75V21a4.5 4.5 0 00-4.5-4.5h-.75%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-red-600 dark:text-red-400 mb-2">+12.5%</h3>
<p class="text-md text-red-500 dark:text-red-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">Total Growth</p>
</div>
<!-- Card 2 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-indigo-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3 2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 8.588m.5 8.281V12.98c0-.5-.494-.954-.99-.954H10.99c-.494 0-.99.454-.99.954v3.291m0 0C6.183 17.11 4.5 14.773 4.5 12c0-3.14 0-5.657 0-5.657s1.517-2.333 4.5-2.333h6c2.983 0 4.5 2.333 4.5 2.333S19.5 8.86 19.5 12c0 2.773-1.683 5.11-4.5 5.991m0 0c-.863 1.096-2.094 1.761-3.497 1.761H12.5c-1.403 0-2.634-.665-3.497-1.761M12 4.5c2.983 0 4.5 2.333 4.5 2.333S16.035 7 12 7c-4.035 0-4.5-.167-4.5-.167S9.017 4.5 12 4.5zM12 19.5c-2.983 0-4.5-2.333-4.5-2.333S7.965 17 12 17c4.035 0 4.5.167 4.5.167S15.017 19.5 12 19.5z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">$12,345</h3>
<p class="text-md text-indigo-500 dark:text-indigo-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Revenue This Month</p>
</div>
<!-- Card 3 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15 19.128a9.38 9.38 0 002.668.236 9.38 9.38 0 002.668-.236l.292-.096.002-.005.002-.006c.725-.24 1.25-.948 1.25-1.745V10.5h-.005a8.775 8.775 0 01-2.903-.787m-1.298.115a9.38 9.38 0 00-2.668-.236 9.38 9.38 0 00-2.668.236l-.292.096-.002.005-.002.006c-.725.24-1.25.948-1.25 1.745v7.5a.75.75 0 00.75.75H13.5c.294 0 .584-.047.863-.129.28-.08.548-.201.797-.367s.475-.386.678-.609.356-.475.46-.757.17-.6-.17-.999a.75.75 0 00-.75-.75h-1c-.414 0-.75-.336-.75-.75V12.75a.75.75 0 01.75-.75h1.5c.414 0 .75.336.75.75v5.006c.729.088 1.393.308 1.956.637l.11.066zM13.5 12h1.5M12 12v.75m-3-2.25H7.5A.75.75 0 006.75 12v7.5c0 .806.525 1.514 1.25 1.745l.002.006.002.005.292.096c1.09.362 2.21.547 3.333.547a11.95 11.95 0 003.497-.379V12.75A.75.75 0 0113.5 12h-.75V9.75a.75.75 0 00-.75-.75h-1.5a.75.75 0 00-.75.75v2.25zM7.5 12h1.5M12 4.5a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5zM21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">350+</h3>
<p class="text-md text-purple-500 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">Projects Completed</p>
</div>
<!-- Card 4 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-red-300 to-pink-300 dark:from-red-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-pink-600 dark:text-pink-400 mb-2">98%</h3>
<p class="text-md text-pink-500 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">Client Satisfaction</p>
</div>
</section>
<!-- Main Chart Area -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Line Chart (Placeholder) -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">Overall Performance Trend</h2>
<div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/1000/600?random=1" alt="Line Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
</div>
<div class="mt-4 flex flex-wrap gap-2 text-sm text-purple-600 dark:text-purple-300">
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1M</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">3M</button>
<button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">6M</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1Y</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">All</button>
</div>
</div>
<!-- Bar Chart (Placeholder) -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-semibold mb-4 text-red-700 dark:text-red-400">Projects by Category</h2>
<div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/1000/600?random=2" alt="Bar Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
</div>
<div class="mt-4 flex flex-wrap gap-2 text-sm text-red-600 dark:text-red-300">
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Development</button>
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Design</button>
<button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Marketing</button>
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Consulting</button>
</div>
</div>
</div>
<!-- Recent Activity Section -->
<section class="mt-12">
<h2 class="text-2xl font-semibold mb-6 text-pink-700 dark:text-pink-400">Recent Milestones & Activity</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Activity Item 1 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-purple-300 dark:border-purple-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Achieved <span class="font-semibold text-red-600 dark:text-red-400">5-star rating</span> on 'E-commerce Redesign' project.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">2 hours ago</p>
</div>
</div>
<!-- Activity Item 2 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-pink-300 dark:border-pink-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">New client inquiry for <span class="font-semibold text-indigo-600 dark:text-indigo-400">'Mobile App Development'</span>.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">Yesterday</p>
</div>
</div>
<!-- Activity Item 3 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-red-300 dark:border-red-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Released case study for <span class="font-semibold text-purple-600 dark:text-purple-400">'SaaS Platform UX improvements'</span>.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">3 days ago</p>
</div>
</div>
<!-- Activity Item 4 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-indigo-300 dark:border-indigo-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Featured in 'Top 10 Frontend Developers' article.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">1 week ago</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- Custom Styles for Neumorphism (consider adding to a CSS file for production) -->
<style>
/* Light mode shadows */
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}
.shadow-neumorphic-light-sm {
box-shadow: 4px 4px 8px #d9d9d9, -4px -4px 8px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #cbcecb, inset -5px -5px 10px #ffffff;
}
/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1b1e, -8px -8px 16px #2e3034;
}
.dark .shadow-neumorphic-dark-sm {
box-shadow: 4px 4px 8px #1a1b1e, -4px -4px 8px #2e3034;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1a1b1e, inset -5px -5px 10px #2e3034;
}
/* Responsive aspect ratio */
.aspect-w-16 {
position: relative;
width: 100%;
}
.aspect-h-9::before {
content: '';
display: block;
padding-bottom: 56.25%; /* 9/16 for 16:9 aspect ratio */
}
.aspect-w-16 > *, .aspect-h-9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Custom dark mode background color for deep neumorphism */
.dark\:bg-gray-850 {
background-color: #242629;
}
/* Custom light mode background colors for main container */
.bg-gradient-to-br.from-purple-200.via-pink-200.to-red-200 {
background-image: linear-gradient(to bottom right, #e9d5ff, #fbcfe8, #fecaca);
}
</style>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.
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.
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.