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 МОЙДОЫР

433

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
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

2 years ago

16k
Tailwind Css Alert

Author:
Prashant

3 years ago

11.5k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

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

Author:
Prashant

2 years ago

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

Author:
John Hutton

4 months ago

223
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

10k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.6k
card Alert - icons - glass

Author:
ABDO-SY

11 months ago

1.2k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

11 months ago

934
Dismissible alert

Author:
Gopi Yadav

3 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components