Home
Manon Daniel
Dismissible Buttons

Dismissible Buttons

This tailwind example is contributed by Manon Daniel, on 07-Jul-2022. Component is made with Tailwind CSS v3.

9.3k

<div>
 <div class="inline-flex items-center h-8 overflow-hidden text-white bg-blue-500 rounded">
  <span class="px-5 py-1.5 text-[12px] font-medium">
    New Message
  </span>

<button onclick="return this.parentNode.remove();"
    class="inline-flex items-center justify-center w-8 h-8 bg-blue-600 transition-color hover:bg-blue-700 focus:outline-none focus:ring"
    type="button"
  >
    <span class="sr-only" > Close </span>

<div class="inline-flex items-center h-8 overflow-hidden text-blue-500 border border-blue-500 rounded">
  <span class="px-5 py-1.5 text-[12px] font-medium">
    New Message
  </span>

<button onclick="return this.parentNode.remove();"
    class="inline-flex items-center justify-center w-8 h-8 text-blue-600 border-l border-blue-500 transition-color hover:bg-blue-100 focus:outline-none focus:ring"
    type="button"
  >
    <span class="sr-only"> Close </span>

Related Examples

Confirm and cancel buttons

Author:
Samuel Dawson

2 years ago

15.7k
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

11.1k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

12.9k
IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

6 months ago

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

Author:
Indra

1 month ago

128
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
Notification badges with count

Author:
Arya

2 years ago

15k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

5 months ago

414
Buy me a coffee floating button

Author:
Ron Hicks

2 years ago

14.3k
Github stars button
Display the GitHub stars received by your project

Author:
Benjamin Ng

2 years ago

8.5k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

3 months ago

262

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components