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
Memphis_Marketplace_Charts_Component
A complex, responsive charts component with a Memphis Design aesthetic, bold complementary colors, suitable for a multi-vendor marketplace. Includes dark mode support and interactive elements.
Retro_Vintage_Charts_Component
A complex sports/fitness charts component with a retro/vintage aesthetic, using earth tones, designed for responsiveness and dark mode support.
Cyberpunk Chart Component
A responsive and interactive-looking chart component with cyberpunk aesthetic, dark backgrounds, neon accents, and cool neutral colors, suitable for educational platforms.