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.

Button Badge

Author Manon Daniel

8.3k

6

Fork Fullscreen

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

<svg  class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>
</div>

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

<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>
</div>   
</div>

Related Examples

Confirm and cancel buttons

Author:
Samuel Dawson

1 year ago

13.9k
Tags list
click to remove the tag from list

Author:
Asher Wilde

1 year ago

9.4k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11.2k
IMDB score and votes box

Author:
Darius G

1 year ago

7.6k
Download on the App Store light button

Author:
Simon Scheffer

1 year ago

11.7k
Badges (Multicolor)

Author:
Mr Robot

2 years ago

8.9k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

4 months ago

728
Beautiful animated button
on hover effect

Author:
Dika Rahman

8 months ago

3.3k
Bordered badges

Author:
Anonymous

1 year ago

6.3k
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

1 year ago

12.2k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

12.2k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

1 year ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9