1. Components
  2. Alerts

Components

Tailwind CSS Alerts

Use Tailwind CSS alerts of various colors and border style to provide contextual feedback massages. Browse alerts with lists, added links or action buttons.

Alerts are essential components for highlighting important information on web pages. They effectively capture user attention for notifications, warnings, or updates.

Customizable in text length and style, alerts can include optional close buttons, ensuring a seamless user experience. By integrating alerts, you ensure that key information is prominently displayed, improving user engagement and overall site functionality

Solid color variants

These solid colors are ideal for creating a cohesive and polished appearance in any application.

Soft color variants

These gentle, muted tones create a subtle yet effective way to draw attention without overwhelming the user.

Bordered styles

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

With description

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

With list

Similarly you can use lists.

Actions

More actionable alert example.

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

Discovery

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

Dismiss button

Use dismiss-alert to dismiss a content.