Collection of free Tailwind CSS notification components from Codepen and other resources.

Related Articles

  1. CSS Notifications
  2. JavaScript Notifications
  3. jQuery Notifications
  4. React Notifications
  5. Vue Notifications
Demo image: Simple Toast

Author

  • Hafiz_Dev

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

Demo image: Toast

Author

  • zoltanszogyenyi

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

Demo image: Notification

Author

  • AlexLeo

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

Demo image: Tailwind CSS Notification Component

Author

  • Harrishash

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

Demo image: Tailwind CSS Notification Card

Author

  • aji

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

Demo image: Notification Alert

Author

  • LeventeNagy

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

Demo image: Toaster Card

Author

  • kgnfth

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

Demo image: Facebook Toast

Author

  • HasanMu

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

Demo image: Tailwind Component Notification Simple

Author

  • Devdojo

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+

Demo image: Tailwind Component Alert Customer Chat

Author

  • Devdojo

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+

Demo image: Tailwind Component Alert Chat

Author

  • Devdojo

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+

Demo image: Notifications

Author

  • muhshahabipour

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

Demo image: Notification

Author

  • Anonymous

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

Demo image: Notification

Author

  • josef256

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