Industrial_Candy_Finance_Badges_Component
Un composant complexe de badges pour la finance/banque, mélangeant l’esthétique industrielle avec des couleurs vives de bonbon. Dispose de plusieurs badges interactifs, d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
<!-- Component Title -->
<h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-gray-200 tracking-tight leading-tight">
<span class="text-pink-500">Financial</span> <span class="text-cyan-400">Insights</span> Badges
</h2>
<!-- Industrial Container -->
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
border-4 border-gray-300 dark:border-gray-700
transform skew-y-1 rotate-1 translate-x-1 translate-y-1
transition-transform duration-300 hover:skew-y-0 hover:rotate-0 hover:translate-x-0 hover:translate-y-0
relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-100 before:to-gray-200 dark:before:from-gray-900 dark:before:to-gray-950 before:opacity-5 dark:before:opacity-10 ">
<!-- Exposed Elements Top Border -->
<div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 dark:from-pink-600 dark:via-purple-600 dark:to-cyan-600 rounded-t-lg"></div>
<!-- Inner Content Area -->
<div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col lg:flex-row gap-8 items-start">
<!-- Left Section: Main Badges Area -->
<div class="flex-1 w-full">
<h3 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-200 flex items-center justify-between">
<span>Your Current Status</span>
<svg class="h-7 w-7 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707m1.279-.621A6 6 0 0112 2c2.652 0 4.972 1.258 6.367 3.17c1.701 2.378 1.83 5.464-.176 7.747C15.688 15.753 13.921 18 12 18s-3.688-2.247-5.823-4.908c-2.006-2.283-1.877-5.369.176-7.747C4.657 5.176 6.98 4 9.663 4H12z" /></svg>
</h3>
<!-- Badges Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<!-- Badge 1: Savings Goal -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 border-2 border-pink-300 dark:border-pink-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-pink-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-6 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h6m-5 0h.01M12 4h.01M12 4v12a4 4 0 004 4h0M12 4v12a4 4 0 01-4 4h0m0-16v12a4 4 0 004 4h0m0-16v12a4 4 0 01-4 4h0m-4-7h4m-4 0h.01M17 7H7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V9a2 2 0 00-2-2z" /></svg>
</div>
<div>
<p class="text-lg font-bold text-pink-700 dark:text-pink-300">Savings Goal</p>
<p class="text-sm text-pink-600 dark:text-pink-400">80% Achieved</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-pink-400 text-white dark:bg-pink-600">High</span>
</div>
<!-- Badge 2: Credit Score -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900 dark:to-cyan-800 border-2 border-cyan-300 dark:border-cyan-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-cyan-500 text-white rounded-full mr-4 shadow-lg group-hover:-rotate-6 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4v10a2 2 0 002 2h12a2 2 0 002-2V4" /></svg>
</div>
<div>
<p class="text-lg font-bold text-cyan-700 dark:text-cyan-300">Credit Score</p>
<p class="text-sm text-cyan-600 dark:text-cyan-400">Excellent (780)</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-cyan-400 text-white dark:bg-cyan-600">Stable</span>
</div>
<!-- Badge 3: Investment Growth -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 border-2 border-purple-300 dark:border-purple-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-purple-500 text-white rounded-full mr-4 shadow-lg group-hover:scale-110 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
</div>
<div>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">Investment Growth</p>
<p class="text-sm text-purple-600 dark:text-purple-400">+15% YTD</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-purple-400 text-white dark:bg-purple-600">Growing</span>
</div>
<!-- Badge 4: Emergency Fund -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 border-2 border-green-300 dark:border-green-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-green-500 text-white rounded-full mr-4 shadow-lg group-hover:translate-x-1 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" /></svg>
</div>
<div>
<p class="text-lg font-bold text-green-700 dark:text-green-300">Emergency Fund</p>
<p class="text-sm text-green-600 dark:text-green-400">3 Months Covered</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-green-400 text-white dark:bg-green-600">Good</span>
</div>
<!-- Badge 5: Debt-to-Income -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 border-2 border-yellow-300 dark:border-yellow-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-yellow-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-12 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
</div>
<div>
<p class="text-lg font-bold text-yellow-700 dark:text-yellow-300">Debt-to-Income</p>
<p class="text-sm text-yellow-600 dark:text-yellow-400">Decreasing (28%)</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-yellow-400 text-white dark:bg-yellow-600">Monitor</span>
</div>
<!-- Badge 6: Budget Compliance -->
<div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 border-2 border-blue-300 dark:border-blue-700
transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
<div class="flex-shrink-0 p-3 bg-blue-500 text-white rounded-full mr-4 shadow-lg group-hover:-translate-y-1 transition-transform">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c.74 3.05 2.11 5.86 4.09 8.23a10.001 10 0 0014.17-14.17c-2.37-1.98-5.18-3.35-8.23-4.09z" /></svg>
</div>
<div>
<p class="text-lg font-bold text-blue-700 dark:text-blue-300">Budget Compliance</p>
<p class="text-sm text-blue-600 dark:text-blue-400">95% On Track</p>
</div>
<span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-blue-400 text-white dark:bg-blue-600">OK</span>
</div>
</div>
<!-- Call to Action / Information Area -->
<div class="p-6 rounded-lg bg-gray-50 dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 text-center relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-opacity-10 dark:bg-opacity-20 bg-pink-500 dark:bg-cyan-500 transform -skew-y-3 group-hover:skew-y-0 transition-transform duration-300"></div>
<p class="relative z-10 text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">
Need a financial tune-up? Connect with an advisor.
</p>
<button class="relative z-10 px-6 py-2 rounded-full font-bold
bg-gradient-to-r from-pink-500 to-purple-500 text-white
hover:from-pink-600 hover:to-purple-600 shadow-lg
transform hover:-translate-y-1 transition-transform duration-200">
Schedule a Call
</button>
</div>
</div>
<!-- Right Section: Recent Activity / Profile -->
<div class="w-full lg:w-1/3 p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-600 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80">
<h3 class="text-xl font-bold mb-5 text-gray-800 dark:text-gray-200">Recent Activity</h3>
<ul class="space-y-4">
<li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-pink-400 dark:bg-pink-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
<span class="ml-4">Credit Card Payment</span>
<span class="font-semibold text-pink-600 dark:text-pink-400">- $500</span>
</li>
<li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-cyan-400 dark:bg-cyan-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
<span class="ml-4">Investment Deposit</span>
<span class="font-semibold text-cyan-600 dark:text-cyan-400">+ $1,200</span>
</li>
<li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-purple-400 dark:bg-purple-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
<span class="ml-4">Mortgage Payment</span>
<span class="font-semibold text-purple-600 dark:text-purple-400">- $1,800</span>
</li>
<li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-green-400 dark:bg-green-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
<span class="ml-4">Q4 Dividend Payout</span>
<span class="font-semibold text-green-600 dark:text-green-400">+ $250</span>
</li>
</ul>
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-800 dark:text-gray-200">Your Profile</h3>
<div class="flex items-center space-x-4 mb-4">
<img class="w-16 h-16 rounded-full border-4 border-cyan-400 dark:border-cyan-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Premium Member</p>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Dedicated to achieving financial freedom through smart choices and consistent habits.
</p>
<button class="w-full px-4 py-2 rounded-md font-bold
bg-gradient-to-r from-cyan-500 to-green-500 text-white
hover:from-cyan-600 hover:to-green-600 shadow-lg
transform hover:-translate-x-1 hover:-translate-y-1 transition-transform duration-200">
Edit Profile
</button>
</div>
</div>
<!-- Exposed Elements Bottom Border -->
<div class="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-green-400 via-blue-400 to-purple-400 dark:from-green-600 dark:via-blue-600 dark:to-purple-600 rounded-b-lg"></div>
</div>
</div>Composants associés
OrganicNatureInspiredBadges
Un composant de badges de complexité modérée avec des lignes fluides inspirées de la nature et une palette de couleurs triadique, adapté à un portfolio pour présenter des travaux ou des produits. Il inclut la réactivité et la prise en charge du mode sombre.
Composant Badges
Composant de badges élégant et réactif pour la documentation ou les sites wiki, avec une palette de couleurs terre, une typographie de luxe et une prise en charge complète du mode sombre.
Insignes de neumorphisme
Il s’agit d’un composant d’insignes de style Neumorphisme avec une palette de couleurs pastel, conçu pour un portfolio et utilisant Tailwind CSS.