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

11.1k

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.9k
Dismissible Buttons

Author:
Manon Daniel

3 years ago

9.3k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

12.9k
Badges for showing statuses

Author:
Mohit Prajapati

3 years ago

10.2k
Company icons chips

Author:
Steven Kuhn

2 years ago

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

9 months ago

1.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

118
Black and white badges

Author:
Anonymous

1 year ago

2.4k
Icon Notification Badge with Count

Author:
Arya

2 years ago

14.2k
Thankyou Card

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

1 year ago

5.5k
Notification Badge

Author:
Mr Robot

3 years ago

10.3k
Elegant Badges
Useful Tailwind classes for creating several types of basic badges.

Author:
Nick Girga

5 months ago

498

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12