Alert

This tailwind example is contributed by МОЙДОЫР, on 24-Sep-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is caution

Alert

Author МОЙДОЫР

Tailwind v3.4 1.4k 4

Fork Fullscreen

<div id="alert-success" class="relative overflow-hidden rounded-2xl border border-green-500/30 bg-gradient-to-r from-green-500/10 to-green-600/10 p-4 text-green-200 shadow-lg animate-[fadeIn_0.6s_ease-out]">
      <div class="flex items-start gap-3">
        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-green-500/20">
          ✅
        </div>
        <div>
          <p class="font-semibold text-green-300">Успіх!</p>
          <p class="text-sm opacity-80">Операція виконана успішно 🎉</p>
        </div>
      </div>
      <button onclick="restartAnim('alert-success','animate-[fadeIn_0.6s_ease-out]')" 
              class="mt-3 text-xs px-3 py-1 rounded-lg bg-green-500/20 hover:bg-green-500/40 transition">
        🔄 Перезапустити
      </button>
    </div>

<div id="alert-warning" class="relative overflow-hidden rounded-2xl border border-yellow-500/30 bg-gradient-to-r from-yellow-500/10 to-yellow-600/10 p-4 text-yellow-200 shadow-lg animate-[slideIn_0.6s_ease-out]">
      <div class="flex items-start gap-3">
        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-yellow-500/20">
          ⚠️
        </div>
        <div>
          <p class="font-semibold text-yellow-300">Увага!</p>
          <p class="text-sm opacity-80">Деякі параметри потребують перевірки.</p>
        </div>
      </div>
      <button onclick="restartAnim('alert-warning','animate-[slideIn_0.6s_ease-out]')" 
              class="mt-3 text-xs px-3 py-1 rounded-lg bg-yellow-500/20 hover:bg-yellow-500/40 transition">
        🔄 Перезапустити
      </button>
    </div>

<div id="alert-error" class="relative overflow-hidden rounded-2xl border border-red-500/30 bg-gradient-to-r from-red-500/10 to-red-600/10 p-4 text-red-200 shadow-lg animate-[scaleIn_0.5s_ease-out]">
      <div class="flex items-start gap-3">
        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500/20">
          ❌
        </div>
        <div>
          <p class="font-semibold text-red-300">Помилка!</p>
          <p class="text-sm opacity-80">Щось пішло не так, спробуйте ще раз.</p>
        </div>
      </div>
      <button onclick="restartAnim('alert-error','animate-[scaleIn_0.5s_ease-out]')" 
              class="mt-3 text-xs px-3 py-1 rounded-lg bg-red-500/20 hover:bg-red-500/40 transition">
        🔄 Перезапустити
      </button>
    </div>

</div>
</div>

Related Examples

Notification Alert Section
Notification card with close button

Prashant

4 years ago

13.9k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Tailwind Css Alert

Prashant

4 years ago

12.2k
Success alert

Anonymous

3 years ago

16.2k
Dismissible alert bar

Simon Scheffer

3 years ago

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

Bushobozi Bush Ivan

8 months ago

633
cards
html , css ,

Hacker Development

1 year ago

1.2k
Alerts - Htmlwind
Simple alerts

Htmlwind

1 year ago

1.1k
Alert panel
Alert panel using

muhittin budak

1 year ago

1.6k
Alert mono color
minimal alerts design

TailwindFlex

4 years ago

11.6k
alert
html , css

Hacker Development

1 year ago

2.1k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

776