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

428

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 panel
Alert panel using

Author:
muhittin budak

9 months ago

626
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

4 months ago

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

Author:
Arya

3 years ago

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

Author:
John Hutton

4 months ago

220
Alert Component

Author:
Conan Hilton

3 years ago

11.3k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Author:
Abhiraj

1 year ago

2k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.4k
Alert Component

Author:
Prem..

3 years ago

11.5k
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

12.1k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

9.9k
machine
tell you how your MAC pc work

Author:
gidy

2 months ago

216
card Alert - icons - glass

Author:
ABDO-SY

10 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components