徽章 | Code Components Hub

徽章组件

一个 Neumorphic Badges 组件，具有博客/内容网站的类似配色方案。它具有响应式设计和深色主题支持，仅使用 HTML 和 Tailwind CSS。

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-6">

  <!-- Badge 1 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-700 dark:to-purple-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      Category A
    </span>
  </div>

  <!-- Badge 2 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-blue-200 to-indigo-300 dark:from-blue-700 dark:to-indigo-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      New Topic
    </span>
  </div>

  <!-- Badge 3 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-purple-200 to-pink-300 dark:from-purple-700 dark:to-pink-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      Popular
    </span>
  </div>

  <!-- Badge 4 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-green-200 to-teal-300 dark:from-green-700 dark:to-teal-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      Featured
    </span>
  </div>

  <!-- Badge 5 (with avatar)-->
  <div class="m-4">
    <span class="inline-flex items-center px-3 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-red-200 to-orange-300 dark:from-red-700 dark:to-orange-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      Author Name
    </span>
  </div>

</div>

<!-- To make Neumorphic shadow work, you need to extend your tailwind.config.js -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a8a8a8, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
  }
</style>

徽章组件

一个简单且响应迅速的徽章组件，采用 3D 美学和互补配色方案设计，适用于博客和内容使用。支持深色模式。

打开预览

                <div class="flex flex-wrap p-5 justify-center">
    <div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 1</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 1.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 2</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 2.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 3</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 3.</p>
    </div>
</div>

徽章组件

具有灰度配色方案的复古主题徽章组件，适用于博客或内容网站。它具有多个交互元素和完全响应能力，并支持深色模式。该设计避免使用 JavaScript，仅依赖 HTML 和 Tailwind CSS。

打开预览

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Badge 1: New Post -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            NEW POST
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>2 days ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
        </div>
      </div>

      <!-- Badge 2: Editor's Pick -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            EDITOR'S PICK
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>1 week ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
        </div>
      </div>

      <!-- Badge 3: Trending Topic -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            TRENDING
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>3 days ago</span>
          </div>
        </div>
         <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
        </div>
      </div>

      <!-- Badge 4: Deep Dive -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            DEEP DIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>1 month ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
        </div>
      </div>

      <!-- Badge 5: Community Spotlight -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            COMMUNITY
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>2 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
        </div>
      </div>

      <!-- Badge 6: Retrospective -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            RETROSPECTIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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>3 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
        </div>
      </div>

    </div>
  </div>
</div>

徽章组件

一个简单的 Glassmorphism 风格的徽章组件，用于社交媒体，具有带有模糊的磨砂玻璃效果、相似颜色和使用 Tailwind CSS 的深色模式支持。它是响应式的，并在必要时使用 picsum.photos 获取图像，使用 randomuser.me 获取头像。不包含 JavaScript。

打开预览

                <div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
    #SocialLife
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
    #Connections
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
    #Community
  </span>
</div>

Neumorphism 徽章

这是一个 Neumorphism 风格的徽章组件，具有柔和的配色方案，专为 Portfolio 设计并使用 Tailwind CSS。

打开预览

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

徽章组件 - 深色模式大地色调

一个复杂的徽章组件系统，采用大地色调设计，适用于深色模式博客/内容界面。该组件包括文章类别、用户状态、内容标记、通知和成就指示器的各种徽章类型。全部使用自然的大地色调，并支持深色模式。该设计是完全响应的，并适应不同的屏幕尺寸。

打开预览

                <!-- Badges Component for Dark Mode Blog with Earth Tones -->
<div class="bg-gray-900 p-6 min-h-screen text-gray-200">
  <div class="max-w-6xl mx-auto space-y-8">
    
    <!-- Badge Showcase Section -->
    <section class="mb-10">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6 border-b border-amber-800/40 pb-2">Badge Components</h2>
      
      <!-- Category Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Category Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70 hover:bg-amber-800/70 transition duration-200">Nature</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70 hover:bg-green-800/70 transition duration-200">Environment</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-brown-900/60 text-amber-100 border border-yellow-900/70 hover:bg-yellow-800/70 transition duration-200">Earth</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-teal-900/60 text-teal-200 border border-teal-800/70 hover:bg-teal-800/70 transition duration-200">Science</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-stone-800/60 text-stone-200 border border-stone-700/70 hover:bg-stone-700/70 transition duration-200">Geology</span>
        </div>
      </div>
      
      <!-- Status Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Status Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
            <div class="w-2 h-2 bg-green-400 rounded-full mr-1.5 animate-pulse"></div>Active
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-amber-900/40 text-amber-200 border border-amber-700/50">
            <div class="w-2 h-2 bg-amber-400 rounded-full mr-1.5"></div>Pending
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-900/40 text-red-200 border border-red-700/50">
            <div class="w-2 h-2 bg-red-400 rounded-full mr-1.5"></div>Closed
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-900/40 text-blue-200 border border-blue-700/50">
            <div class="w-2 h-2 bg-blue-400 rounded-full mr-1.5"></div>In Review
          </span>
        </div>
      </div>
      
      <!-- Interactive Tag Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Interactive Tag Badges</h3>
        <div class="flex flex-wrap gap-2">
          <button class="flex items-center px-3 py-1 bg-stone-800 hover:bg-stone-700 rounded-lg text-xs font-medium text-stone-200 border border-stone-700 transition duration-200">
            Forest <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-amber-900/70 hover:bg-amber-800 rounded-lg text-xs font-medium text-amber-100 border border-amber-800 transition duration-200">
            Desert <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-emerald-900/70 hover:bg-emerald-800 rounded-lg text-xs font-medium text-emerald-100 border border-emerald-800 transition duration-200">
            Vegetation <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
      </div>
      
      <!-- Notification Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Notification Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-amber-600 rounded-full flex items-center justify-center text-xs font-bold text-white">3</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-green-700 rounded-full flex items-center justify-center text-xs font-bold text-white">2</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-red-700 rounded-full flex items-center justify-center text-xs font-bold text-white">5</span>
          </div>
        </div>
      </div>
      
      <!-- Achievement Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Achievement Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-amber-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-amber-200">Gold</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-lg border-2 border-stone-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-stone-200">Silver</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-yellow-800 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-yellow-200">Bronze</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-lg border-2 border-emerald-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-emerald-200">Earth</span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Usage Example in Content Context -->
    <section class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6">Implementation Example</h2>
      
      <!-- Article Card with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 hover:shadow-lg transition duration-300 mb-8">
        <img src="https://picsum.photos/id/29/800/400" alt="Article cover" class="w-full h-56 object-cover object-center">
        
        <div class="p-5">
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70">Environment</span>
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">Conservation</span>
            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
              <div class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></div>New
            </span>
          </div>
          
          <h3 class="text-xl font-semibold text-amber-50 mb-2">Exploring Forest Ecosystems in the Pacific Northwest</h3>
          <p class="text-gray-300 mb-4">An in-depth look at the diverse ecology and conservation efforts in the temperate rainforests...</p>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Author avatar" class="w-8 h-8 rounded-full border border-amber-600">
                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border border-amber-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
              </div>
              <div>
                <p class="text-sm font-medium text-amber-100">Olivia Matthews</p>
                <p class="text-xs text-gray-400">Environmental Scientist</p>
              </div>
            </div>
            
            <div class="flex items-center text-gray-400 text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
              2.4k
              <span class="mx-2">•</span>
              <span class="inline-flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
                42
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- User Profile with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 p-5">
        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-5">
          <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile" class="w-20 h-20 rounded-full border-2 border-amber-700 object-cover">
            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-700 rounded-full flex items-center justify-center shadow-lg border border-green-600">
              <div class="w-2.5 h-2.5 bg-green-400 rounded-full"></div>
            </div>
          </div>
          
          <div class="flex-1 text-center sm:text-left">
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
              <h3 class="text-xl font-bold text-amber-50">Daniel Harrison</h3>
              <div class="flex flex-wrap justify-center sm:justify-start gap-1.5">
                <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-emerald-900/70 text-emerald-200 border border-emerald-800">Contributor</span>
                <span class="flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                  </svg>
                  Verified
                </span>
              </div>
            </div>
            
            <p class="text-gray-300 mb-3">Environmental journalist focused on climate change and conservation efforts around the globe.</p>
            
            <div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-3">
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">42</span>
                <span class="text-xs text-gray-400">Articles</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">2.1k</span>
                <span class="text-xs text-gray-400">Followers</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">186</span>
                <span class="text-xs text-gray-400">Following</span>
              </div>
            </div>
            
            <div class="flex flex-wrap justify-center sm:justify-start items-center gap-3">
              <p class="text-sm text-gray-400">Achievements:</p>
              <div class="flex space-x-1.5">
                <div class="w-8 h-8 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-md border border-amber-600" title="Top Contributor">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-md border border-emerald-600" title="Conservation Expert">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-md border border-stone-400" title="5 Year Member">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

徽章组件

专为社交媒体界面设计的响应式徽章组件，具有引人入胜的微交互和互补配色方案，支持深色模式。

打开预览

                <div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">  
  <!-- Badge Example -->  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">    
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Name</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">    
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Another User</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">    
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Three</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">    
    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Four</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">    
    <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project One</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">    
    <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project Two</span>  
  </div>
</div>

徽章组件

一个响应式徽章组件，具有 Material Design 样式、深色主题支持和博客内容的大地色调配色方案。

打开预览

                <div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
    <div class="m-4">
        <div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Author: John Doe</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Category: Nature</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Tag: Environment</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Contributor: Jane Smith</span>
        </div>
    </div>
</div>

徽章组件

一个简约的仪表板徽章组件，具有大地色调和深色模式支持。

打开预览

                <div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
        <span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
        <span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
    </div>
</div>

徽章组件 - 3D 类似仪表盘

一个响应式徽章组件，具有3D设计、类似色彩方案、适中的复杂性和仪表板的黑暗主题支持。仅使用Tailwind CSS类。

打开预览

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">

  <!-- Badge 1 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
    <svg class="w-4 h-4 mr-1" 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>
    Completed
  </span>

  <!-- Badge 2 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
    <svg class="w-4 h-4 mr-1" 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="M6 18L18 6M6 6l12 12"></path></svg>
    Failed
  </span>

  <!-- Badge 3 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
    <svg class="w-4 h-4 mr-1" 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>
    Pending
  </span>

  <!-- Badge 4 - Example with icon and no text -->
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
    <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 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </span>

</div>