Basic alert (Success, Info, Warning, Error)

This tailwind example is contributed by John Hutton, on 22-Sep-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is caution

Alert

Author John Hutton

Tailwind v3.4 766 3

Fork Fullscreen

<div class="px-6 py-4 mx-2 my-4 rounded-md text-lg flex items-center mx-auto max-w-lg">
        <svg viewBox="0 0 24 24" class="text-green-600 w-5 h-5 sm:w-5 sm:h-5 mr-3">
            <path fill="currentColor"
                d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z">
            </path>
        </svg>
        <span class="text-green-800">Credit Applied</span>
    </div>

<div class="px-6 py-4 my-4 rounded-md text-lg flex items-center mx-auto max-w-lg">
        <svg viewBox="0 0 24 24" class="text-yellow-600 w-5 h-5 sm:w-5 sm:h-5 mr-3">
            <path fill="currentColor"
                d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z">
            </path>
        </svg>
        <span class="text-yellow-800">Partial Credit Applied </span>
    </div>

<div class=" px-6 py-4 mx-2 my-4 rounded-md text-lg flex items-center mx-auto max-w-lg">
        <svg viewBox="0 0 24 24" class="text-red-600 w-5 h-5 sm:w-5 sm:h-5 mr-3">
            <path fill="currentColor"
                d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z">
            </path>
        </svg>
        <span class="text-red-800">Credit Not Applied </span>
    </div>

</div>

Related Examples

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.

Abhiraj

1 year ago

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

Prajwal Hallale

3 years ago

8.1k
Notification Alert Section
Notification card with close button

Prashant

4 years ago

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

Code huit

3 years ago

16.7k
dailoge box
dailoge box

Sathishkumar Nallusamy

4 months ago

301
Alert panel
Alert panel using

muhittin budak

1 year ago

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

640
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Commentaires simple
Commentaires

Omer fils ELENGA

8 months ago

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

Prashant

3 years ago

15.6k