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

Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Rajesh Maheshwari

1 year ago

2.1k
machine
tell you how your MAC pc work

gidy

11 months ago

751
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
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
Notification Alert Section
Notification card with close button

Prashant

4 years ago

13.9k
Alert Component

Conan Hilton

4 years ago

12.2k
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
cards
html , css ,

Hacker Development

1 year ago

1.2k
Alert panel
Alert panel using

muhittin budak

1 year ago

1.6k
Confirmation model

Mr Robot

4 years ago

13.6k
Tailwind CSS Alert

Krishna Gudpalle

4 years ago

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

Prajwal Hallale

3 years ago

8.1k