divwarningbeginner

Warning Alert

A yellow/amber warning alert for cautionary information and important notices.

Preview

Warning

Your storage is almost full. Consider upgrading your plan.

<div class="flex items-start gap-3 p-4 bg-amber-50 border border-amber-200 rounded-lg max-w-md">
  <svg class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
  <div class="flex-1">
    <p class="text-sm font-semibold text-amber-800">Warning</p>
    <p class="text-sm text-amber-700">Your storage is almost full. Consider upgrading your plan.</p>
  </div>
</div>

Color Breakdown

Background

bg-amber-50

#fffbeb

Border

border-amber-200

#fde68a

Icon

text-amber-600

#d97706

Title

text-amber-800

#92400e

Message

text-amber-700

#b45309

Dark Mode Variant

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

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

Use Cases

Storage warningsDeprecation noticesAccount expiration reminders

Browser Support

All modern browsers.

Related Recipes

Notification Card

card - beginner

Success Alert

div - beginner

Error 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

When should I use a warning vs an error?▼

Use warning for non-blocking cautionary info (almost full, expiring soon). Use error for blocking problems (failed action, invalid data).