Financial Badges Component

<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>