Home
Nick Girga
Material 3 Chips [Light]

Material 3 Chips [Light]

Chips that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 19-May-2025. Component is made with Tailwind CSS v3. similar terms for this example is tags

Chip

Author Nick Girga

379

Fork Fullscreen

<span class="text-lg">Rounded Square Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      
      <div class="flex flex-row items-center gap-2">

<span class="chip">Enabled</span>

<span class="chip">
          Enabled
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal">Enabled</span>
        
        
        <span class="chip chip-tonal">
          Enabled
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>
    </div>

<span class="text-lg mt-8">Round Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      <div class="flex flex-row items-center gap-2">

<span class="chip rounded-full">Free Shipping</span>

<span class="chip rounded-full">
          Free Shipping
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal rounded-full">Free Shipping</span>
        
        
        <span class="chip chip-tonal rounded-full">
          Free Shipping
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>
    </div>

<span class="text-lg mt-8">Icon Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      <div class="flex flex-row items-center gap-2">

<span class="chip py-1 pl-1 rounded-full">
          <div class="chip-icon-bg overflow-hidden">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" alt="Example avatar" />
          </div>
          @account
        </span>

<span class="chip py-1 pl-1 rounded-full">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">mail</span>
          </div>
          me@myclo.ud
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal rounded-full py-1 pl-1">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">health_and_beauty</span>
          </div>
          Beauty
        </span>
        
        
        <span class="chip chip-tonal rounded-full py-1 pl-1">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">fastfood</span>
          </div>
          Fast Food
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

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

Related Examples

Chip with logo

Author:
Fagundo67

2 years ago

12.7k
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

11k
Company icons chips

Author:
Steven Kuhn

2 years ago

9.3k
Info chips with icon

Author:
Bunny

2 years ago

9.7k
chip
Interactive and customizable chips or tags to display labels, categories, or filters. Includes options for removable chips with icons and different styles.

Author:
Abhiraj

8 months ago

1.2k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

10 months ago

1.8k
Material 3 Buttons [Light]
Buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

4 months ago

674
Steps section for explaining process
Step component with a curved line connecting all steps

Author:
Anonymous

1 year ago

9.2k
login page
modern login form by salvator

Author:
Baraka Salvator

4 months ago

252
Basic pagination

Author:
Leon Bachmann

2 years ago

8.3k
modern portifolio
by salvator

Author:
Baraka Salvator

4 months ago

400
Server Control Center
Server Control Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

194

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components