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

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

13k
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.5k
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

10 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

3 weeks ago

407
Badge with border

Author:
Steven Kuhn

3 years ago

12.3k
Badges - Htmlwind
Basic badges

Author:
Htmlwind

5 months ago

270
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

140
IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
Icon Notification Badge with Count

Author:
Arya

2 years ago

14.2k

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