Components

Tailwind CSS Alerts - Madhuranjan UI

Browse a wide variety of alert components crafted with pure Tailwind CSS. These alerts are fully responsive, support both light and dark modes, and are perfect for displaying important messages, warnings, confirmations, and system notices in any UI.

Default Alerts

Basic alert components for success, info, warning, and error messages. Clean and minimal with color-coded backgrounds.

🔔

Primary Alert

This is a primary alert message.

✅

Success Alert

This is a success alert message.

⚠️

Warning Alert

This is a warning alert message.

❌

Error Alert

This is an error alert message.

ℹ️

Info Alert

This is an informational alert message.

1<div class="space-y-3 p-2">
2  <div class="flex items-start gap-3 rounded-lg border border-violet-300 bg-violet-50 p-4 text-violet-800 dark:border-blue-500/30 dark:bg-blue-950 dark:text-blue-100">
3  <span class="text-xl mt-0.5">🔔</span>
4  <div>
5    <h4 class="font-semibold">Primary Alert</h4>
6    <p>This is a primary alert message.</p>
7  </div>
8</div>
9
10

Alerts With Bullet Points

Use these alerts to display lists inside a notification—for example, form validation errors or multi-step warnings.

Primary Alert

  • Important notice one
  • Secondary information
  • Final note or guidance

Success Alert

  • All systems operational
  • Backup complete
  • No further action required

Warning Alert

  • Storage almost full
  • License expires soon
  • Update recommended

Error Alert

  • Failed to connect to server
  • Invalid user input
  • Try again later

Info Alert

  • New feature available
  • Scheduled maintenance Sunday
  • Read the release notes
1<div class="space-y-3 p-5">
2<div class="flex items-start gap-3 rounded-lg border border-violet-300 bg-violet-50 p-4 text-violet-800 dark:border-blue-500/30 dark:bg-blue-950 dark:text-blue-100">
3  <svg class="h-5 w-5 mt-1 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4    <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"/>
5  </svg>
6  <div>
7    <h4 class="font-semibold mb-1">Primary Alert</h4>
8    <ul class="list-disc list-inside space-y-1 text-sm">
9      <li>Important notice one</li>
10      <li>Secondary information</li>

Dismissible Alerts

Allow users to dismiss notifications without JavaScript using Tailwind’s peer utility. These alerts are fully accessible and pure CSS.

Welcome to your dashboard! Explore features.

Your profile was updated successfully! View changes.

You're nearing your storage limit. Upgrade now.

Something went wrong. Try again.

Heads up! We’ve just rolled out an update. See what’s new.

1  <div class="p-5 space-y-4">
2   <div class="relative">
3    <input type="checkbox" id="close-primary" class="peer hidden" />
4    <div class="flex items-center gap-3 rounded-xl border border-violet-300 bg-violet-50 p-4 text-violet-900 shadow-sm transition-all duration-200 peer-checked:hidden dark:border-blue-600/30 dark:bg-blue-950 dark:text-blue-100">
5      <svg class="h-5 w-5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
6        <path d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0ZM9 9V5h2v4H9Zm0 2h2v2H9v-2Z" />
7      </svg>
8      <p class="text-sm">Welcome to your dashboard! <a href="#" class="font-semibold underline hover:text-violet-700 hover:no-underline dark:hover:text-blue-300">Explore features</a>.</p>
9      <label for="close-primary" class="ms-auto cursor-pointer rounded-md p-1.5 text-violet-600 hover:bg-violet-100 dark:text-blue-300 dark:hover:bg-blue-900">
10        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 14 14">

Alerts with Decorative Borders

Add visual emphasis using accent borders on the top, side, or all around. Great for drawing user attention while keeping things elegant.

Welcome to your dashboard! Explore features.

Your profile was updated successfully! View changes.

You're nearing your storage limit. Upgrade now.

Something went wrong. Try again.

Heads up! We’ve just rolled out an update. See what’s new.

1<div class="p-5 space-y-4">
2  <!-- 1. Primary – Border: Top Only -->
3  <div class="relative">
4    <input type="checkbox" id="close-primary-variant" class="peer hidden" />
5    <div class="flex items-start gap-3 border-t-4 border-violet-500 rounded-b-xl bg-violet-50 p-4 shadow-sm transition peer-checked:hidden dark:bg-blue-950 dark:text-blue-100">
6      <svg class="h-5 w-5 shrink-0 text-violet-500" fill="currentColor" viewBox="0 0 20 20">
7        <path d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0ZM9 9V5h2v4H9Zm0 2h2v2H9v-2Z" />
8      </svg>
9      <p class="text-sm">Welcome to your dashboard! <a href="#" class="font-semibold underline hover:text-violet-700 dark:hover:text-blue-300">Explore features</a>.</p>
10      <label for="close-primary-variant" class="ms-auto cursor-pointer p-1.5 text-violet-600 hover:bg-violet-100 dark:text-blue-300 dark:hover:bg-blue-900">

Alerts with Titles, Text & Actions

These alerts contain a title, description, and buttons for interacting with the alert. Great for actionable feedback or confirmations.

This is an info alert

More info about this alert goes here. This example text runs longer to test spacing.

Success!

Your operation completed successfully. Everything is saved and up to date.

Storage almost full

You’re nearing your usage limit. Upgrade soon to avoid service interruption.

Something went wrong

There was a problem processing your request. Please try again or contact support.

Welcome back

You’re all set to explore your dashboard. Let’s get started!

1  <div class="space-y-4 p-5">
2      <div class="relative">
3        <input type="checkbox" id="alert-info-modern" class="peer hidden" />
4        <div class="rounded-xl border border-blue-300 bg-blue-50 p-5 text-sm shadow-sm transition peer-checked:hidden dark:border-blue-600/40 dark:bg-blue-950">
5          <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
6            <div class="flex gap-4">
7              <svg
8                class="h-5 w-5 text-blue-500 shrink-0"
9                fill="currentColor"
10                viewBox="0 0 20 20"

Full-Width Gradient Bar Alerts

These horizontal bar alerts sit at the top or bottom of your screen. Use them for site-wide announcements or global system messages.

1<div class="relative">
2  <input type="checkbox" id="bar-alert" class="peer hidden" />
3  <div class="w-full bg-gradient-to-r from-indigo-600 via-indigo-700 to-indigo-800 px-4 py-3 text-sm text-white peer-checked:hidden dark:from-indigo-900 dark:via-indigo-950 dark:to-indigo-900" role="alert">
4    <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between gap-4">
5      <div class="flex items-center gap-2">
6        <svg class="h-5 w-5 shrink-0 text-indigo-200" fill="currentColor" viewBox="0 0 20 20">
7          <path d="M9 9V5h2v4H9Zm0 2h2v2H9v-2Z" />
8          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16Z" clip-rule="evenodd" />
9        </svg>
10        <p class="font-medium">New updates available. Check out the latest changes.</p>

Floating Banner Alerts

Show a stylish banner with an inline message and optional action link. This pattern is perfect for announcing new features or updates.

We've made improvements to your dashboard performance.

1<div class="p-4">
2  <div class="mx-auto max-w-2xl rounded-full bg-indigo-50 px-4 py-3 shadow-sm ring-1 ring-inset ring-indigo-200 dark:bg-indigo-900 dark:ring-indigo-700">
3    <div class="flex items-center gap-4 text-sm text-indigo-800 dark:text-indigo-100">
4      <div class="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-200 dark:bg-indigo-700">
5        <svg class="h-4 w-4 text-indigo-700 dark:text-white" fill="currentColor" viewBox="0 0 20 20">
6          <path d="M9 9V5h2v4H9Zm0 2h2v2H9v-2Z" />
7          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16Z" clip-rule="evenodd" />
8        </svg>
9      </div>
10      <p>We've made improvements to your dashboard performance.</p>
AvatarBadge