Dismissible Buttons

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

Tailwind v3.4 9.7k 10

<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

Samuel Dawson

3 years ago

17k
Tags list
click to remove the tag from list

Asher Wilde

3 years ago

12.1k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
IMDB score and votes box

Darius G

3 years ago

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

Hamza Atig

1 year ago

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

Indra

1 year ago

1k
Buttons set
buttons sets of, primary, outlined, text and link

Akram Khan

2 years ago

2.2k
Sign in with Google Login Button

Anonymous

1 year ago

1.9k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Kavita Joshi

2 years ago

8.5k
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Ingrid Schulz

3 years ago

11.8k
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

4 months ago

645
Button With Loader
Tailwind Loader

Md. Tofayel islam

2 years ago

3.7k