Glassmorphism_Grayscale_Badges_Component

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative p-6 rounded-2xl shadow-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-50 max-w-lg w-full overflow-hidden">
    <!-- Background blur elements - positioned absolutely for glassmorphism effect -->
    <div class="absolute inset-0 z-0" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-2000"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gray-200 dark:bg-gray-800 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-4000"></div>
    <div class="relative z-10">
      <h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-gray-800 dark:text-gray-100 text-center">
        Our Achievements
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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="M5 13l4 4L19 7"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Certified Excellence</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">ISO 9001:2015</p>
          </div>
        </div>

        <!-- Badge 2 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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 8c1.657 0 3 .895 3 2s-1.343 2-3 2h-1c-1.657 0-3 .895-3 2s1.343 2 3 2h1a5 5 0 005-5v-1a5 5 0 00-5-5H7a5 5 0 00-5 5v1a5 5 0 005 5h1c1.657 0 3-.895 3-2s-1.343-2-3-2H8c-1.657 0-3-.895-3-2s1.343-2 3-2h1"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Industry Leader</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Top 10 Innovator</p>
          </div>
        </div>

        <!-- Badge 3 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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="M3 6l3 1m0 0l-3 1.5M6 7l3-1m0 0l-3 1.5m0 0l-3 1.5M6 9l3-1m0 0a9.002 9.002 0 00-3-7.5M12 6a9.002 9.002 0 013 7.5"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Client Satisfaction</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">98% Positive Feedback</p>
          </div>
        </div>

        <!-- Badge 4 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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 11V7m0 0L5 9m2-2l2 2m7-2v4m0 0l2 2m-2-2l-2 2M12 18h.01M12 6h.01M12 12h.01M12 18h.01M12 6h.01M12 12h.01"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Award Winning</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Tech Growth Award 2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the custom blob animation */
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
</style>