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.

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

Author:
Asher Wilde

2 years ago

10.7k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

12.3k
IMDB score and votes box

Author:
Darius G

1 year ago

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

2 months ago

302
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

1 year ago

8k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

5 months ago

533
tradition music
by salvator

Author:
Baraka Salvator

1 month ago

109
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

1 year ago

5.1k
Badges without border

Author:
Prajwal Hallale

2 years ago

7.3k
Get it on Google Play button dark

Author:
Simon Scheffer

2 years ago

12.4k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components