Collection of free Tailwind CSS notification components from Codepen and other resources.
Related Articles
- CSS Notifications
- JavaScript Notifications
- jQuery Notifications
- React Notifications
- Vue Notifications

Links
Made with
- HTML / CSS / JS
About a code
Simple Toast
A simple toast with its functionality. A user can click the toast to close it or it will close automatically after 5 seconds.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: boxicons.css, alpine.js
Tailwind version: 3.0.18

Links
Made with
- HTML / CSS
About a code
Toast
Use this Tailwind CSS toast component to show message alerts and push notifications to your users.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS
About a code
Notification
Simple notification component.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS
About a code
Tailwind CSS Notification Component
Tailwind notifications are used to draw a user’s attention to important information.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS
About a code
Tailwind CSS Notification Card
Delete information list.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.4

Links
Made with
- HTML / CSS
About a code
Notification Alert
Simple notification alert boxes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.4

Links
Made with
- HTML / CSS
About a code
Toaster Card
Bootstrap 5 toaster.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS / JS
About a code
Facebook Toast
Toast facebook using Tailwind CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: alpine.js
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS
About a code
Tailwind Component Notification Simple
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Tailwind Component Alert Customer Chat
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Tailwind Component Alert Chat
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Notifications
Notifications card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.2.0

Links
Made with
- HTML / CSS
About a code
Notification
A notification for Tailwind CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.2.0

Links
Made with
- HTML / CSS
About a code
Notification
Ant design inspired notifications.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.2.0