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.6k

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.2k
Badges for showing statuses

Author:
Mohit Prajapati

2 years ago

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

951
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

249
Notification Badge

Author:
Mr Robot

2 years ago

9.8k
Badge with border

Author:
Steven Kuhn

2 years ago

12k
Timeline
timeline with journey

Author:
Abhiraj

5 months ago

511
Thankyou Card

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.7k
Badges for showing status

Author:
Conan Hilton

2 years ago

8.7k

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