Search Components

Badges

Small indicators typically used to show counts or status

Badges Component

Badges Component with responsive dark theme support for e-commerce.

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

Skeuomorphic Badges

A set of badges with a skeuomorphic design, complementary color scheme, and simple layout, suitable for a blog or content site. Responsive with dark mode support.

Open Preview

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

Badges Component

A Neumorphism styled badges component for blogs with analogous color scheme and rich interface.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p>
            </div>
        </div>
        
        <!-- Badge 2 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2>
                <p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p>
            </div>
        </div>
        
        <!-- Badge 3 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p>
            </div>
        </div>
        
        <!-- Badge 4 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2>
                <p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p>
            </div>
        </div>
    </div>
</div>

RetroBadges

Retro/Vintage Badges Component for Business/Corporate websites with Complementary color scheme. Simple layout, responsive design with dark theme support. No JavaScript.

Open Preview

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

Badges Component

A neumorphic Badges Component designed for blog content consumption with interactive elements and responsive design supporting dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">  
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>  
  <div class="grid grid-cols-3 gap-4">    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>    
    </div>  
  </div>  
  <div class="grid grid-cols-1 gap-4 mt-8">    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>  
  </div>  
</div>

Badges Component

A responsive badges component designed with a 3D style using Earth tones, featuring interactive elements suitable for a dashboard.

Open Preview

                <div class="flex flex-wrap gap-4 p-5">
    <!-- Badge 1 -->
    <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
        <p class="text-gray-600 dark:text-gray-400">1500</p>
    </div>
    
    <!-- Badge 2 -->
    <div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
        <p class="text-gray-600 dark:text-gray-400">300</p>
    </div>
    
    <!-- Badge 3 -->
    <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
        <p class="text-gray-600 dark:text-gray-400">$10,000</p>
    </div>
    
    <!-- Badge 4 -->
    <div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
        <p class="text-gray-600 dark:text-gray-400">250</p>
    </div>
</div>

Badges Component

Badges Component - Minimalist/Flat Design with responsive effects and dark theme support. No JavaScript, pure HTML and CSS with Tailwind.

Open Preview

                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge with long text that should wrap or truncate
</span>

Badges Component

A responsive Badges component with engaging microinteractions, designed using Tailwind CSS. Supports dark mode and includes image placeholders.

Open Preview

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

Badges Component

A responsive badges component with microinteractions and dark theme support, designed using Tailwind CSS. This component includes hover effects and uses placeholder images for avatars.

Open Preview

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

Skeuomorphic Badges

A Skeuomorphic Badges Component with responsive effects and dark theme support.

Open Preview

                <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
  Badge
</span>

<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
  Badge
</span>

<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
  Badge
</span>

<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
  <svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Badge with dot
</span>

Search Components

Categories

Badges