Alerts - Htmlwind

Simple alerts

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is caution

Alert

Author Htmlwind

Tailwind v3.4 1.1k 3

Fork Fullscreen

<div class="bg-white py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="space-y-6">
      
      <div class="mx-auto w-full max-w-4xl">
        <div class="rounded-lg bg-green-50 p-4 ring-1 ring-inset ring-green-200">
          <div class="flex items-start gap-x-4">
            <div class="shrink-0">
              <svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
              <div class="mt-1">
                <p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="mx-auto w-full max-w-4xl">
        <div class="rounded-lg bg-yellow-50 p-4 ring-1 ring-inset ring-yellow-300">
          <div class="flex items-start gap-x-4">
            <div class="shrink-0">
              <svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
              <div class="mt-1">
                <p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="mx-auto w-full max-w-4xl">
        <div class="rounded-lg bg-red-50 p-4 ring-1 ring-inset ring-red-200">
          <div class="flex items-start gap-x-4">
            <div class="shrink-0">
              <svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
              <div class="mt-1">
                <p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="mx-auto w-full max-w-4xl">
        <div class="rounded-lg bg-blue-50 p-4 ring-1 ring-inset ring-blue-200">
          <div class="flex items-start gap-x-4">
            <div class="shrink-0">
              <svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
              <div class="mt-1">
                <p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="mx-auto w-full max-w-4xl">
        <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-200">
          <div class="flex items-start gap-x-4">
            <div class="shrink-0">
              <svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-sm font-semibold text-gray-700">New update available</h3>
              <div class="mt-1">
                <p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Dismissible alert

Gopi Yadav

4 years ago

12.5k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

776
Commentaires simple
Commentaires

Omer fils ELENGA

7 months ago

785
Notification Alert Section
Notification card with close button

Prashant

4 years ago

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

Prashant

3 years ago

15.5k
cards
html , css ,

Hacker Development

1 year ago

1.2k
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bushobozi Bush Ivan

8 months ago

633
Tailwind Css Alert

Prashant

4 years ago

12.2k
Tailwind CSS Alert

Krishna Gudpalle

4 years ago

11.8k
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.

Abhiraj

1 year ago

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

Code huit

3 years ago

16.7k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Rajesh Maheshwari

1 year ago

2.1k