Home
Asher Wilde
Tags list

Tags list

click to remove the tag from list

This tailwind example is contributed by Asher Wilde, on 01-Apr-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is tags

Badge Chip

Author Asher Wilde

9.7k

8

Fork Fullscreen

<div class="flex space-x-2 items-center justify-center w-full min-h-screen">

<div
        class="inline-flex items-center justify-between space-x-1 bg-green-100 text-green-800 px-2 py-0.5 rounded-md text-sm">
        <svg onclick="this.parentElement.remove()" class="cursor-pointer h-4 w-4 text-green-900"
            xmlns="http://www.w3.org/2000/svg" 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>
        <div class="select-none">
            Cat
        </div>
    </div>

<div
        class="inline-flex items-center justify-between space-x-1 bg-green-100 text-green-800 px-2 py-0.5 rounded-md text-sm">
        <svg onclick="this.parentElement.remove()" class="cursor-pointer h-4 w-4 text-green-900"
            xmlns="http://www.w3.org/2000/svg" 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>
        <div class="select-none">
            Dog
        </div>
    </div>

<div
        class="inline-flex items-center justify-between space-x-1 bg-green-100 text-green-800 px-2 py-0.5 rounded-md text-sm">
        <svg onclick="this.parentElement.remove()" class="cursor-pointer h-4 w-4 text-green-900"
            xmlns="http://www.w3.org/2000/svg" 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>
        <div class="select-none">
            Snake
        </div>
    </div>

<div
        class="inline-flex items-center justify-between space-x-1 bg-green-100 text-green-800 px-2 py-0.5 rounded-md text-sm">
        <svg onclick="this.parentElement.remove()" class="cursor-pointer h-4 w-4 text-green-900"
            xmlns="http://www.w3.org/2000/svg" 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>
        <div class="select-none">
            Eagle
        </div>
    </div>

</div>

Related Examples

Chip with logo

Author:
Fagundo67

1 year ago

11.5k
Dismissible Buttons

Author:
Manon Daniel

2 years ago

8.5k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11.4k
Badges for showing statuses

Author:
Mohit Prajapati

2 years ago

9k
Company icons chips

Author:
Steven Kuhn

2 years ago

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

1 week ago

94
Notification Bell w/ Pinging Badge

Author:
threehymns

1 year ago

6k
Notification badges with count

Author:
Arya

2 years ago

12.9k
Badge with border

Author:
Steven Kuhn

2 years ago

11.3k
Info chips with icon

Author:
Bunny

1 year ago

8.7k
IMDB score and votes box

Author:
Darius G

1 year ago

7.8k
Info Badges
Badges for showing information about stuff

Author:
Mohit Prajapati

2 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1