Memphis_Finance_Charts_Component
A complex financial charts component inspired by Memphis Design, featuring bold colors, geometric shapes, and a neon/electric color scheme. It's fully responsive, supports dark mode, and is suitable for finance/banking interfaces.
HTML Code
<div class="font-sans bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen text-gray-800 dark:text-gray-100 relative overflow-hidden">
<!-- Memphis background elements (for visual interest) -->
<div class="absolute top-0 left-0 w-48 h-48 bg-purple-400 dark:bg-purple-700 opacity-30 dark:opacity-20 rounded-full blur-3xl -ml-24 -mt-24"></div>
<div class="absolute bottom-0 right-0 w-64 h-64 bg-yellow-300 dark:bg-yellow-600 opacity-30 dark:opacity-20 rounded-full blur-3xl -mr-32 -mb-32"></div>
<div class="absolute top-1/2 left-1/4 w-32 h-32 bg-pink-400 dark:bg-pink-700 opacity-30 dark:opacity-20 rounded-lg blur-xl -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
<div class="absolute bottom-1/2 right-1/4 w-40 h-40 bg-teal-300 dark:bg-teal-600 opacity-20 dark:opacity-10 rounded-full blur-2xl translate-x-1/2 translate-y-1/2"></div>
<div class="max-w-7xl mx-auto relative z-10">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-center drop-shadow-lg leading-tight" style="text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.2), 4px 4px 0px rgba(0, 0, 0, 0.1);">
<span class="text-fuchsia-600 dark:text-fuchsia-400">F</span>inancial <span class="text-lime-500 dark:text-lime-300">P</span>erformance
</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Main Overview Card -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-fuchsia-400 dark:border-fuchsia-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-teal-300 dark:bg-teal-600 -mt-12 -mr-12 rounded-full opacity-20"></div>
<div class="absolute bottom-0 left-0 w-32 h-32 bg-lime-300 dark:bg-lime-600 -mb-16 -ml-16 rounded-lg opacity-20 transform rotate-12"></div>
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 relative z-10">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-50 drop-shadow">Portfolio Growth</h2>
<div class="mt-4 sm:mt-0 flex space-x-2">
<button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1M</button>
<button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 bg-fuchsia-100 dark:bg-fuchsia-800 transition-colors duration-200">6M</button>
<button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1Y</button>
</div>
</div>
<div class="relative flex justify-center items-center h-64 md:h-80 bg-gradient-to-tr from-fuchsia-100 to-purple-100 dark:from-purple-900 dark:to-fuchsia-900 rounded-xl mb-6 overflow-hidden border-2 border-fuchsia-500 dark:border-fuchsia-700">
<!-- Placeholder for Chart Image -->
<img src="https://picsum.photos/800/400?random=1&grayscale&blur=2" alt="Placeholder chart" class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10 rounded-xl">
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="w-full h-full border-2 border-dashed border-fuchsia-500 dark:border-fuchsia-300 rounded-lg flex flex-col justify-center items-center text-center p-4">
<p class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 drop-shadow-md">+15.7%</p>
<p class="text-lg sm:text-xl font-semibold text-gray-600 dark:text-gray-300">Total Return (6 Months)</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
<div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current Value</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$85,450</p>
</div>
<div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Invested</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$73,800</p>
</div>
<div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Daily Change</p>
<p class="text-lg font-bold text-lime-600 dark:text-lime-300">+$345</p>
</div>
<div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Asset Count</p>
<p class="text-lg font-bold text-orange-600 dark:text-orange-300">12</p>
</div>
</div>
</div>
<!-- Top Holdings Card -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-lime-400 dark:border-lime-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
<div class="absolute top-0 left-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-10 -ml-10 rounded-full opacity-20"></div>
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Top Holdings</h2>
<ul class="space-y-4 relative z-10">
<li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
<img src="https://picsum.photos/40/40?random=2" alt="Stock Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">NASDAQ 100</p>
<p class="text-sm text-gray-500 dark:text-gray-400">35% of Portfolio</p>
</div>
<span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+2.1%</span>
</li>
<li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
<img src="https://picsum.photos/40/40?random=3" alt="Crypto Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Bitcoin (BTC)</p>
<p class="text-sm text-gray-500 dark:text-gray-400">20% of Portfolio</p>
</div>
<span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+1.8%</span>
</li>
<li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
<img src="https://picsum.photos/40/40?random=4" alt="Bond Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">US Treasury Bonds</p>
<p class="text-sm text-gray-500 dark:text-gray-400">15% of Portfolio</p>
</div>
<span class="ml-auto text-red-600 dark:text-red-300 font-bold">-0.5%</span>
</li>
<li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
<img src="https://picsum.photos/40/40?random=5" alt="Gold Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Gold ETF</p>
<p class="text-sm text-gray-500 dark:text-gray-400">10% of Portfolio</p>
</div>
<span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+0.9%</span>
</li>
</ul>
</div>
</div>
<!-- Recent Transactions & Risk Assessment -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Recent Transactions Card -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-purple-400 dark:border-purple-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
<div class="absolute top-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mt-10 -mr-10 rounded-full opacity-20"></div>
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Recent Activity</h2>
<ul class="space-y-4 relative z-10">
<li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
<div class="w-10 h-10 rounded-full bg-lime-200 dark:bg-lime-700 flex items-center justify-center text-lime-700 dark:text-lime-300 font-bold text-xl drop-shadow">↑</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Deposit</p>
<p class="text-sm text-gray-500 dark:text-gray-400">From Checking Account</p>
</div>
<span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+$1,500</span>
</li>
<li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
<div class="w-10 h-10 rounded-full bg-red-200 dark:bg-red-700 flex items-center justify-center text-red-700 dark:text-red-300 font-bold text-xl drop-shadow">↓</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Withdrawal</p>
<p class="text-sm text-gray-500 dark:text-gray-400">To Savings Account</p>
</div>
<span class="ml-auto text-red-600 dark:text-red-300 font-bold">-$500</span>
</li>
<li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
<div class="w-10 h-10 rounded-full bg-purple-200 dark:bg-purple-700 flex items-center justify-center text-purple-700 dark:text-purple-300 font-bold text-xl drop-shadow">📈</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Buy NASDAQ</p>
<p class="text-sm text-gray-500 dark:text-gray-400">100 Units</p>
</div>
<span class="ml-auto text-purple-600 dark:text-purple-300 font-bold">-$10,000</span>
</li>
</ul>
</div>
<!-- Risk Assessment Card -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-teal-400 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
<div class="absolute bottom-0 right-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mb-12 -mr-12 rounded-lg opacity-20 transform -rotate-12"></div>
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Risk Assessment</h2>
<div class="relative flex justify-center items-center h-48 bg-gradient-to-br from-teal-100 to-lime-100 dark:from-lime-900 dark:to-teal-900 rounded-xl mb-6 overflow-hidden border-2 border-teal-500 dark:border-teal-700">
<img src="https://picsum.photos/600/300?random=6&grayscale&blur=2" alt="Placeholder risk chart" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 rounded-xl">
<div class="relative z-10 flex flex-col items-center justify-center p-4">
<p class="text-5xl font-extrabold text-teal-700 dark:text-teal-300 drop-shadow-md mb-2">Moderate</p>
<p class="text-lg font-semibold text-gray-600 dark:text-gray-300 text-center">Your portfolio risk is currently balanced.</p>
<a href="#" class="mt-4 inline-block px-5 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-full font-semibold hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors duration-200 shadow-md">View Details</a>
</div>
</div>
<div class="p-4 bg-teal-50 dark:bg-teal-900 rounded-xl border-2 border-teal-300 dark:border-teal-600 relative z-10">
<p class="text-sm text-gray-600 dark:text-gray-300">
Your current risk score is <strong>4.5/10</strong>, primarily driven by your exposure to tech stocks. Consider diversifying further for optimal balance.
</p>
</div>
</div>
</div>
<!-- Advisory Section -->
<div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-orange-400 dark:border-orange-700 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-12 -ml-12 rounded-full opacity-20"></div>
<div class="absolute bottom-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mb-10 -mr-10 rounded-lg opacity-20 transform -rotate-45"></div>
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Expert Insights</h2>
<div class="flex flex-col sm:flex-row items-center gap-6 relative z-10">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Financial Advisor" class="w-24 h-24 rounded-full border-4 border-orange-500 dark:border-orange-400 shadow-lg">
<div>
<p class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">"Market trends indicate potential for growth in renewable energy. Consider allocating a small portion of your portfolio."</p>
<p class="text-sm text-gray-600 dark:text-gray-300">— <span class="font-medium text-orange-600 dark:text-orange-300">Alex Chen, Senior Financial Advisor</span></p>
<a href="#" class="mt-3 inline-block px-5 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 dark:from-orange-600 dark:to-yellow-600 text-white rounded-full font-semibold hover:from-orange-600 hover:to-yellow-600 dark:hover:from-orange-700 dark:hover:to-yellow-700 transition-colors duration-200 shadow-md">Schedule a Call</a>
</div>
</div>
</div>
</div>
</div>Related Components
Playful Rainbow Charts Component (Fashion/Beauty)
A simple, playful, and colorful charts component designed for fashion and beauty brands, featuring rounded elements, rainbow gradients, and full responsiveness with 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 simple, responsive chart component for sports/fitness applications, featuring a dark mode UI with jewel tones. Displays a basic progress or performance metric.