Neumorphic 徽章组件

<div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
  <div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">

    <!-- Active Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-blue-600 dark:text-blue-400 
                   shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                   hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
      <span class="text-sm font-semibold whitespace-nowrap">Active</span>
    </button>

    <!-- Pending Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-yellow-600 dark:text-yellow-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
    </button>

    <!-- Success Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-green-600 dark:text-green-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Completed</span>
    </button>

    <!-- Error Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-red-600 dark:text-red-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Failed</span>
    </button>

    <!-- Info Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-gray-700 dark:text-gray-300 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Informational</span>
    </button>

    <!-- New Feature Badge with avatar -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-purple-600 dark:text-purple-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
      <span class="text-sm font-semibold whitespace-nowrap">New Update</span>
      <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800 
                   dark:bg-purple-800 dark:text-purple-200 
                   shadow-inner">PRO</span>
    </button>

     <!-- Tag with image/icon -->
     <button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-indigo-600 dark:text-indigo-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
      <img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
      <span class="text-sm font-semibold whitespace-nowrap">Website</span>
    </button>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
  }

  /* Inset styles for pushed/active state */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
  }

  /* Add a subtle animation for the active dot */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Ensure all transitions are smooth */
  .transition-colors {
    transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
</style>