Components

Tailwind CSS Alert

Tailwind CSS alerts come in handy when you want to display contextual feedback messages which attract user’s attention and inform user to take required action without disturbing his ongoing task.

image

Few of the alert messages can be warning message, success or failure message, session timeout, etc.  Broadly these css alerts are classified into 4 different categories

  • Warning (yellow/ orange)
  • Danger/ error (red)
  • Success (green)
  • Information (blue)

These alerts in tailwind css are available in different shapes, size and styles and can be selected based on the nature of the page and type of message. Following are all of the different options available to choose from.

Default Alert

Following examples of alert components can be used to display messages as feedback to your user.

<div class="p-4 mb-4 text-sm text-gray-900 rounded-xl bg-gray-50 font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-indigo-600 rounded-xl bg-indigo-50 font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-emerald-500 rounded-xl bg-emerald-50 font-normal" role="alert">
      <span class="font-semibold mr-2">Success</span> Your subscription payment is successful
      </div>
      <div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 font-normal" role="alert">
      <span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
      </div>
      <div class="p-4 mb-4 text-sm text-red-500 rounded-xl bg-red-50 font-normal" role="alert">
      <span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
      </div>

Bordered Alert

Tailwind popup alerts with borders which highlight the alert with border outline.

<div class="p-4 mb-4 text-sm text-gray-900 rounded-xl bg-gray-50 border border-gray-400  font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-indigo-600 rounded-xl bg-indigo-50 border border-indigo-400 font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-emerald-500 rounded-xl bg-emerald-50 border border-emerald-400 font-normal" role="alert">
      <span class="font-semibold mr-2">Success</span> Your subscription payment is successful
      </div>
      <div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 border border-amber-400 font-normal" role="alert">
      <span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
      </div>
      <div class="p-4 mb-4 text-sm text-red-500 rounded-xl bg-red-50 border border-red-400 font-normal" role="alert">
      <span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
      </div>

Solid Background Alert

This alert message style will have solid color as background which will help in highlighting the alert in more attractive way.

 <div class="p-4 mb-4 text-sm text-white rounded-xl bg-gray-900  font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-white rounded-xl bg-indigo-600  font-normal" role="alert">
      <span class="font-semibold mr-2">Alert</span> Your subscription payment is due
      </div>
      <div class="p-4 mb-4 text-sm text-white rounded-xl bg-emerald-500  font-normal" role="alert">
      <span class="font-semibold mr-2">Success</span> Your subscription payment is successful
      </div>
      <div class="p-4 mb-4 text-sm text-white rounded-xl bg-amber-500  font-normal" role="alert">
      <span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
      </div>
      <div class="p-4 mb-4 text-sm text-white rounded-xl bg-red-500  font-normal" role="alert">
      <span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
      </div>

Alert with Content

This type of tailwind css alerts will come with certain short message also which will make it easier for user to understand the message.

<div class="p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <h3 class="text-amber-500 font-normal">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      <div class="p-4 mb-4 text-sm  rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
      <h3 class="text-emerald-500 font-normal">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      <div class="p-4 mb-4 text-sm  rounded-xl bg-red-500" role="alert">
      <h3 class="text-white font-normal">
      <span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
      </h3>
      <p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>

Alert with Content and Buttons

This advanced type will not only show alert with message but will ask user to take action via action buttons too.

<div class="p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <h3 class="text-amber-500 font-normal">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
      </div>
      </div>
      <div class="p-4 mb-4 text-sm  rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
      <h3 class="text-emerald-500 font-normal">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
      </div>
      </div>
      <div class="p-4 mb-4 text-sm  rounded-xl bg-red-500" role="alert">
      <h3 class="text-white font-normal">
      <span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
      </h3>
      <p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-white transition-all duration-500">Remind later</button>
      <button class="font-semibold text-white transition-all duration-500">Renew now</button>
      </div>
      </div>

Alert with Icon

Icons help in conveying message without explaning much. this can also be used. 

<div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-amber-50 text-amber-500" role="alert">
      <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
      <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
      <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </div>

Alert with Icon and content

This type of tailwind alerts modal come with icon and also with written content 

  <div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-amber-500 font-normal text-base">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="mt-1 text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      </div>
      <div class="block">
      <h3 class="text-emerald-500 font-normal text-base">
      <span class="font-semibold mr-1">Success</span>Your subscription payment is successful
      </h3>
      <p class="mt-1 text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl bg-red-500" role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      </div>
      <div class="block">
      <h3 class="text-white font-normal text-base">
      <span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
      </h3>
      <p class="mt-1 text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>

Alert with Icon, Content & Button

One step ahead, it inclided button also along side icon and content.

 <div class="flex p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      </div>
      <div class="block">
      <h3 class="text-amber-500 font-normal">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl text-sm  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16666M9.99984 6.66666H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      </div>
      <div class="block">
      <h3 class="text-emerald-500 font-normal">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl text-sm  bg-red-500 " role="alert">
      <div class="mr-2">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-white font-normal">
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </h3>
      <p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-white transition-all duration-500">Remind later</button>
      <button class="font-semibold text-white transition-all duration-500 ">Renew now</button>
      </div>
      </div>
      </div>

Alert with icon style

alert type which show different icon style

 <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <h3 class="text-amber-500 font-normal">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3334V9.16669M10.0003 6.66669H10.0078M10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <h3 class="text-emerald-500 font-normal">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-red-500" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3334V9.16669M10.0003 6.66669H10.0078M10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <h3 class="text-white font-normal">
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </h3>
      </div>

Alert with icon style and content

Use this tailwind alert box for bit advanced than the previous one is icon with content text into it.

<div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-amber-500 font-normal mb-1">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16666M10.0003 6.66666H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-emerald-500 font-normal mb-1">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-red-500" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-white font-normal mb-1">
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </h3>
      <p class="text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      </div>
      </div>

Alert with icon style and content and button

Further ahead, this style will have buttons too

<div class="flex  p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-amber-500 font-normal mb-1">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16666M10.0003 6.66666H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-emerald-500 font-normal mb-1">
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
      <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex items-start p-4 mb-4 rounded-xl text-sm  bg-red-500" role="alert">
      <div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
      <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block">
      <h3 class="text-white font-normal mb-1">
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </h3>
      <p class="text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
      <div class="flex items-center gap-6 mt-4">
      <button class="font-semibold text-white transition-all duration-500">Remind later</button>
      <button class="font-semibold text-white transition-all duration-500">Renew now</button>
      </div>
      </div>
      </div>

Alert with avatar

Below tailwind alert message example will come with avatar you can add description and/or buttons too if required.

<div class="block">
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-amber-50 text-amber-500" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3" />
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500 mr-3" />
      <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white mr-3" />
      <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </div>
      </div>

Alert with avatar and content

Below example will come with avatar you can add description and/or buttons too if required.

<div class="block">
      <div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3"/>                                            
      <div class="block">
        <h3 class="text-amber-500 font-normal text-base"><span class="font-semibold mr-1">Warning</span> Your subscription payment is due</h3>
        <p class="mt-1 text-gray-600 text-sm">2 min ago</p>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500 mr-3"/>
      <div class="block">
      <h3 class="text-emerald-500 font-normal text-base"><span class="font-semibold mr-1">Success</span> Your subscription payment is successful</h3>
      <p class="mt-1 text-gray-600 text-sm">2 min ago</p>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white mr-3"/>
      <div class="block">
      <h3 class="text-white font-normal text-base"><span class="font-semibold mr-1">Danger</span> Your subscription payment is failed</h3>
      <p class="mt-1 text-white/80 text-sm">2 min ago</p>
      </div>
      </div>
      </div>

Alert with avatar and content and button

Below example will come with avatar you can add description and/or buttons too if required.

<div class="block">
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-3">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500">
      </div>
      <div class="block">
      <h3 class="text-amber-500 font-normal mb-1">
        <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </h3>
      <p class="text-gray-600 text-sm">2 min ago</p>
      <div class="flex items-center gap-6 mt-4">
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-3">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500">
      </div>
      <div class="block">
      <h3 class="text-emerald-500 font-normal mb-1">
        <span class="font-semibold mr-1">Success</span> Your subscription payment is successful
      </h3>
      <p class="text-gray-600 text-sm">2 min ago</p>
      <div class="flex items-center gap-6 mt-4">
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
      </div>
      </div>
      </div>
      <div class="flex items-start p-4 mb-4 rounded-xl text-sm  bg-red-500" role="alert">
      <div class="mr-3">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white">
      </div>
      <div class="block">
      <h3 class="text-white font-normal mb-1">
        <span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
      </h3>
      <p class="text-white/80 text-sm">2 min ago</p>
      <div class="flex items-center gap-6 mt-4">
        <button class="font-semibold text-white transition-all duration-500">Remind later</button>
        <button class="font-semibold text-white transition-all duration-500">Renew now</button>
      </div>
      </div>
      </div>
      </div>

size

Following examples can also be used in case different sizes need to be used. 

<div class="block">
      <div class="flex items-center p-4 mb-4 rounded-xl text-sm  bg-amber-50 text-amber-500" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with small avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </div>
      <div class="flex items-center p-4 mb-4 rounded-xl text-normal  bg-amber-50 text-amber-500" role="alert">
      <img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with medium avatar image" class="w-8 h-8 rounded-full border-2 border-amber-500 mr-3">
      <span class="font-semibold mr-1">Warning</span> Your subscription payment is due
      </div>
      </div>

Alert with progress

This tailwind alert message will display progress bar which will allow user to check if the task is being progressed or not.

<div class="block">
      <div class="flex  p-4 mb-4 rounded-xl text-normal  bg-amber-50" role="alert">
      <div class="mr-3">
      <svg class="w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-amber-500 font-normal mb-3">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloading, waiting for network
      </h3>
      <div class="relative flex items-center">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-normal  bg-emerald-50 border border-emerald-400" role="alert">
      <div class="mr-3">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-emerald-500 font-normal mb-3">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloaded successfully
      </h3>
      <div class="relative flex items-center">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-normal  bg-red-500" role="alert">
      <div class="mr-3">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-white font-normal mb-3">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloading failed
      </h3>
      <div class="relative flex items-center">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white/20">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="40" style="width: 40%" class="flex h-full items-center justify-center bg-white  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      </div>
      </div>
      </div>

Alert with progress with description

This is much similar to alert with progress but will provide description too 

<div class="block">
      <div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
      <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <div class="block w-full">
      <h3 class="text-amber-500 font-normal text-base">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloading, waiting for network
      </h3>
      <p class="mt-1 text-gray-600 text-sm">2 min left</p>
      <div class="relative flex items-center pt-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
      <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <div class="block w-full">
      <h3 class="text-emerald-500 font-normal text-base">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloaded successfully
      </h3>
      <p class="mt-1 text-gray-600 text-sm">2 min left</p>
      <div class="relative flex items-center pt-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
      </div>
      </div>
      </div>
      <div class="flex p-4 mb-4 rounded-xl bg-red-500" role="alert">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
      <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <div class="block w-full">
      <h3 class="text-white font-normal text-base">
        <span class="font-semibold mr-1">Pagedone.fig</span> downloading failed
      </h3>
      <p class="mt-1 text-white/80 text-sm">2 min left</p>
      <div class="relative flex items-center pt-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white/20">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-white  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      </div>
      </div>
      </div>

Alert with progress with description and button

Following example clearly shows how clearly it passes the alert message which will help user complete the task without any error and with much ease.

<div class="block">
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-amber-50" role="alert">
      <div class="mr-3">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-amber-500 font-normal mb-1">
        <span class="font-semibold mr-1">Pagedone.fig</span>downloading, waiting for network
      </h3>
      <p class="text-gray-600 text-sm">2 min left</p>
      <div class="relative flex items-center py-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      <div class="flex items-center gap-6">
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Cancel</button>
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Retry</button>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-emerald-50" role="alert">
      <div class="mr-3">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-emerald-500 font-normal mb-1">
        <span class="font-semibold mr-1">Pagedone.fig</span>downloaded successfully
      </h3>
      <p class="text-gray-600 text-sm">2 min left</p>
      <div class="relative flex items-center py-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white">
          <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
      </div>
      <div class="flex items-center gap-6">
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Cancel</button>
        <button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Re-download</button>
      </div>
      </div>
      </div>
      <div class="flex  p-4 mb-4 rounded-xl text-sm  bg-red-500" role="alert">
      <div class="mr-3">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      </div>
      <div class="block w-full">
      <h3 class="text-white font-normal mb-1">
        <span class="font-semibold mr-1">Pagedone.fig</span>downloading failed
      </h3>
      <p class="text-white/80 text-sm">2 min left</p>
      <div class="relative flex items-center py-2">
        <div class="relative shadow-sm w-full h-2.5  overflow-hidden rounded-3xl bg-white/20">
          <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-white  text-white rounded-3xl"></div>
        </div>
        <span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
      </div>
      <div class="flex items-center gap-6">
        <button class="font-semibold text-white transition-all duration-500 ">Cancel</button>
        <button class="font-semibold text-white transition-all duration-500 ">Retry</button>
      </div>
      </div>
      </div>
      </div>

Dismissable Alert

Requires Pagedone JS

To Use this Dismissable alert it requires Pagedone UI package need to be included.

Such tailwind alert dismisss messages are shown to remind something, which can be closed after reading. You need to add data-dismiss="alert" in button element.

 <div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 font-normal" role="alert">
      <div class="flex">
      <span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending <button class="pl-3 ml-auto" data-dismiss="alert">
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.833497 9.16659L9.16683 0.833253M9.16683 9.16658L0.833496 0.833252" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </button>
      </div>
      </div>