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

10.7k

10

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

2 years ago

12.4k
Dismissible Buttons

Author:
Manon Daniel

2 years ago

9k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

12.3k
Badges for showing statuses

Author:
Mohit Prajapati

2 years ago

9.7k
Company icons chips

Author:
Steven Kuhn

2 years ago

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

5 months ago

1k
Badge with border

Author:
Steven Kuhn

2 years ago

12k
Black and white badges

Author:
Anonymous

1 year ago

2k
Bordered badges

Author:
Anonymous

1 year ago

7.5k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

206
Info chips with icon

Author:
Bunny

2 years ago

9.3k
Badges (Multicolor)

Author:
Mr Robot

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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 Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1