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

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