diverrorbeginner

Error Alert

A red error alert with an exclamation icon for displaying validation or server errors.

Preview

Error

There was a problem processing your request. Please try again.

<div class="flex items-start gap-3 p-4 bg-red-50 border border-red-200 rounded-lg max-w-md">
  <svg class="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
  <div class="flex-1">
    <p class="text-sm font-semibold text-red-800">Error</p>
    <p class="text-sm text-red-700">There was a problem processing your request. Please try again.</p>
  </div>
  <button class="text-red-500 hover:text-red-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>
</div>

Color Breakdown

Background

bg-red-50

#fef2f2

Border

border-red-200

#fecaca

Icon

text-red-600

#dc2626

Title

text-red-800

#991b1b

Message

text-red-700

#b91c1c

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-red-900/20 dark:border-red-800 dark:text-red-400

Use Cases

Form validation errorsAPI error messagesPermission denied notices

Browser Support

All modern browsers.

Related Recipes

Notification Card

card - beginner

Success Alert

div - beginner

Warning Alert

div - beginner

Info Toast

div - intermediate

Cookie Banner

div - beginner

Loading Skeleton

div - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I show multiple error messages?▼

Replace the paragraph with a ul list: <ul class='list-disc list-inside'><li>Error 1</li><li>Error 2</li></ul>.