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

815

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

Company icons chips

Author:
Steven Kuhn

3 years ago

9.8k
Info chips with icon

Author:
Bunny

3 years ago

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

1 year ago

1.6k
Chip with logo

Author:
Fagundo67

3 years ago

13.1k
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

11.4k
Stacked Checkboxes

Author:
kishan pc

1 year ago

3.3k
card

Author:
pablitodgb

8 months ago

677
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

1 year ago

1.4k
beautifull project Item

Author:
Akram Khan

1 year ago

2.4k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

3.7k
Card
travel place card hover effect card

Author:
nahid hasan

1 year ago

2.1k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components