Alert

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

Alert

Author МОЙДОЫР

729

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

Alert Component

Author:
Conan Hilton

3 years ago

11.4k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.3k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

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

Author:
Bushobozi Bush Ivan

2 weeks ago

74
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

13.5k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

1 year ago

1.4k
Basic alert (Success, Info, Warning, Error)

Author:
Prashant

2 years ago

14.3k
Alert mono color
minimal alerts design

Author:
TailwindFlex

3 years ago

10.9k
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

8k
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

12.1k
Dismissible alert bar

Author:
Simon Scheffer

3 years ago

10.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

2 years ago

16.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components