Search Components

Badges

Small indicators typically used to show counts or status

Badges Component

A simple Glassmorphism-styled badges component for social media, featuring frosted glass effects with blur, analogous colors, and dark mode support using Tailwind CSS. It's responsive and uses picsum.photos for images and randomuser.me for avatars where necessary. No JavaScript is included.

Open Preview

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

This is a Neumorphism-style Badges Component with a Pastel color scheme, designed for a Portfolio and using Tailwind CSS.

Open Preview

                <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 - Dark Mode Earth Tones

A complex badges component system designed with earth tones for a dark mode blog/content interface. The component includes various badge types for article categories, user status, content tags, notifications, and achievement indicators. All using natural earth tone colors with dark mode support. The design is fully responsive and adapts to different screen sizes.

Open Preview

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

Badges Component

A responsive badges component designed for social media interfaces, featuring engaging microinteractions and a complementary color scheme, supporting dark mode.

Open Preview

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

Badges Component

A responsive badges component with Material Design style, dark theme support, and earth tones color scheme for blog content.

Open Preview

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

Badges Component

A minimalist badges component for dashboards, featuring earth tones and dark mode support.

Open Preview

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

Badges Component - 3D Analogous Dashboard

A responsive Badges Component with 3D design, analogous color scheme, moderate complexity, and dark theme support for dashboards. Uses Tailwind CSS classes only.

Open Preview

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

Badges Component

A versatile Badges Component designed for business/corporate websites, utilizing Earth tones in a dark mode UI to enhance user experience. The component features responsiveness with some interactive elements.

Open Preview

                <div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </div>
</div>

Badges Component

A responsive Badges Component with Skeuomorphism style, Triadic color scheme, and simple complexity, designed for portfolios with dark theme support.

Open Preview

                <div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
  <div class="text-center">
    <img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
  </div>
  <div class="flex justify-center mt-6 space-x-3">
    <span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
    <span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
    <span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
  </div>
  <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Showcasing skills and expertise.</p>
  </div>
</div>

Badges Component

A responsive Badges component designed with microinteractions, featuring a complementary color scheme and dark theme support. Ideal for business and corporate websites, this component includes engaging animations that respond to user actions. Previously mentioned visual cues like hover effects enhance the user experience.

Open Preview

                <div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

Search Components

Categories

Badges