1. Components
  2. Alerts


Tailwind CSS Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Color variants

Solid color variants

The default form of solid color avatars.

Soft color variants

The default form of soft color avatars.

With description

Alerts can also contain additional HTML elements like headings, paragraphs and icons.

With list

Similarly you can use lists.


More actionable alert example.

Use utility classes to quickly provide matching colored links within any alert.


Use a discovery message to signify an update to the UI or provide information around new features and onboarding.

Dismiss button

Requires JS

Note that this component requires the use of our Remove Element plugin, else you can skip this message if you are already using Preline UI as a package.

Use dismiss-alert to dismiss a content.