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

361

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.2k
cards
html , css ,

Author:
Hacker Development

7 months ago

786
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.7k
Alert Component

Author:
Prem..

3 years ago

11.4k
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

11 months ago

953
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

3 months ago

529
Alert panel
Alert panel using

Author:
muhittin budak

8 months ago

624
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

11.9k
Alert mono color
minimal alerts design

Author:
TailwindFlex

3 years ago

10.6k
Alert with big logo

Author:
_Amar_

3 years ago

11.2k
alert
dehgan creator

Author:
Anonymous

7 months ago

480
Basic alert (Success, Info, Warning, Error)

Author:
Prashant

2 years ago

14.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components