Composant des badges financiers
Un composant de badges financiers au design minimaliste et plat utilisant des tons océan/bleu, adapté aux interfaces financières et bancaires. Il dispose d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-950 min-h-screen font-sans text-gray-800 dark:text-gray-100 transition-colors duration-300">
<div class="max-w-6xl mx-auto space-y-8">
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-50 tracking-tight text-center">
Your Financial Badges
</h1>
<p class="text-lg text-center text-blue-700 dark:text-blue-200 mb-8">
Track your achievements and financial milestones.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Badge 1: Top Saver -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-blue-600 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-blue-700 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 3V9M3 19V6l12-3v13M3 19l6 3m-6-3h12m-9 3l9 3M3 6h12l-3-3H3c-.621 0-1-.379-1-1v-4a1 1 0 011-1h18a1 1 0 011 1v4a1 1 0 01-1 1h-2m-10 3v4a1 1 0 001 1h16a1 1 0 001-1v-4a1 1 0 00-1-1H7z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Top Saver</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Achieved 10% more savings than your monthly goal for 6 consecutive months.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-100">Earned: Jan 15, 2024</span>
</div>
<!-- Badge 2: Budget Master -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-teal-500 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-teal-100 dark:bg-teal-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-teal-700 dark:text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Budget Master</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Stayed within your monthly budget limits for 3 consecutive quarters.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-teal-100 text-teal-700 dark:bg-teal-800 dark:text-teal-100">Earned: Feb 28, 2024</span>
</div>
<!-- Badge 3: Investment Pioneer -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-indigo-500 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-indigo-700 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M3 21h18M12 4V3m-9 7h1.01M16 4h.01M6 21v-7a2 2 0 012-2h4a2 2 0 012 2v7m-4 0v-5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5h6z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Investment Pioneer</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Made your first 5 successful investments with positive returns.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-100">Earned: Mar 10, 2024</span>
</div>
<!-- Badge 4: Debt Slayer -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-red-500 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-red-700 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Debt Slayer</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Successfully paid off 50% or more of your total consumer debt.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-100">Earned: Apr 05, 2024</span>
</div>
<!-- Badge 5: Emergency Fund Builder -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-emerald-500 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-emerald-700 dark:text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 14V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v16M4 20h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Emergency Fund Builder</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Successfully funded 3 months of living expenses in your emergency fund.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-800 dark:text-emerald-100">Earned: May 01, 2024</span>
</div>
<!-- Badge 6: Credit Score Climber -->
<div class="relative flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
<div class="absolute top-0 left-0 right-0 h-2 bg-sky-500 rounded-t-xl"></div>
<div class="w-24 h-24 rounded-full bg-sky-100 dark:bg-sky-900 flex items-center justify-center mb-4 transition-colors duration-300">
<svg class="w-12 h-12 text-sky-700 dark:text-sky-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h6l3 3v8h-4v2h-8v-2H1v-8l3-3h6m0 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h8a2 2 0 002-2V9m6 0h2v9a2 2 0 01-2 2h-2m-8-8c1.657 0 3-.895 3-2s-1.343-2-3-2V7h-3v4"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-blue-900 dark:text-blue-50 mb-2 text-center">Credit Score Climber</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center flex-grow">Increased your credit score by 50 points or more within a year.</p>
<span class="mt-4 inline-block px-4 py-1.5 text-xs font-semibold rounded-full bg-sky-100 text-sky-700 dark:bg-sky-800 dark:text-sky-100">Earned: Jun 12, 2024</span>
</div>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300">
Explore More Achievements
<svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>Composants associés
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.
Composant Badges
Composant Badges - Design minimaliste / plat avec effets réactifs et prise en charge du thème sombre. Pas de JavaScript, du HTML pur et du CSS avec Tailwind.
Composant Badges - Mode sombre Tons de terre
Un système complexe de composants de badges conçu avec des tons de terre pour une interface de blog/contenu en mode sombre. Le composant comprend différents types de badges pour les catégories d’articles, le statut de l’utilisateur, les balises de contenu, les notifications et les indicateurs de réussite. Le tout en utilisant des couleurs naturelles de couleur terre avec prise en charge du mode sombre. Le design est entièrement réactif et s’adapte aux différentes tailles d’écran.