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

798

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
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
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

11.4k
Info chips with icon

Author:
Bunny

3 years ago

10.2k
Chip with logo

Author:
Fagundo67

3 years ago

13.1k
Company icons chips

Author:
Steven Kuhn

3 years ago

9.8k
User registration form with Instructions

Author:
Fagundo67

3 years ago

24.6k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Kevin

3 months ago

140
Sign up
sign up page

Author:
gidy

8 months ago

1.3k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

2 years ago

12.5k
Hero

Author:
ORGIN_DREAMS

8 months ago

1.2k
Steps section verticle

Author:
Ron Hicks

3 years ago

9.8k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components