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

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.7k
Tags list
click to remove the tag from list

Author:
Asher Wilde

1 year ago

9k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

11k
IMDB score and votes box

Author:
Darius G

1 year ago

7.5k
Badges for showing statuses

Author:
Mohit Prajapati

2 years ago

8.7k
Border bottom button

Author:
Santos78

1 year ago

10.9k
Social buttons
Mono-color Social buttons change colors according to your need

Author:
Arya

2 years ago

10.7k
Badges without border

Author:
Prajwal Hallale

2 years ago

7.2k
Botton hover
On hover Changes text

Author:
davilaarroyo07

8 months ago

3.8k
Dioganal cuts Buttons

Author:
Adulik

1 year ago

5.7k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

1 year ago

7.5k
Sign in with buttons

Author:
Simon Scheffer

1 year ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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