Alerts – Tailwind Bootstrap

Default Alerts

<div class="bg-blue-100 rounded text-blue-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Primary alert!</span> This is a blue alert message.</p>
</div>

<div class="bg-slate-100 rounded text-slate-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Secondary alert!</span> This is a slate alert message.</p>
</div>

<div class="bg-green-100 rounded text-green-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Success alert!</span> This is a green alert message.</p>
</div>

<div class="bg-red-100 rounded text-red-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Danger alert!</span> This is a red alert message.</p>
</div>

<div class="bg-yellow-100 rounded text-yellow-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Warning alert!</span> This is a yellow alert message.</p>
</div>

<div class="bg-sky-100 rounded text-sky-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Info alert!</span> This is a info alert message.</p>
</div>

<div class="bg-slate-50 rounded text-slate-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Light alert!</span> This is a slate alert message.</p>
</div>  

<div class="bg-gray-200 rounded text-gray-800 px-5 py-4 mb-4" role="alert">
  <p class="text-sm"><span class="font-medium">Dark alert!</span> This is a gray alert message.</p>
</div>

Alerts with icon

<div class="bg-blue-100 rounded text-blue-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-blue-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Primary alert!</span> This is a blue alert message.
  </p>
</div>

<div class="bg-slate-100 rounded text-slate-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Secondary alert!</span> This is a slate alert message.
  </p>
</div>

<div class="bg-green-100 rounded text-green-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Success alert!</span> This is a green message.
  </p>
</div>

<div class="bg-red-100 rounded text-red-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Danger alert!</span> This is a red alert message.
  </p>
</div>

<div class="bg-yellow-100 rounded text-yellow-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-yellow-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Warning alert!</span> This is a yellow alert message.
  </p>
</div>

<div class="bg-sky-100 rounded text-sky-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-sky-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Info alert!</span> This is a sky alert message.
  </p>
</div>

<div class="bg-slate-50 rounded text-slate-700 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Light alert!</span> This is a slate alert message.
  </p>
</div>

<div class="bg-gray-200 rounded text-gray-900 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-gray-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Dark alert!</span> This is a gray alert message.
  </p>
</div>

We added Font Awesome in this component.

Bordered alerts

<div class="bg-blue-100 rounded text-blue-700 border border-blue-300 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-blue-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Primary alert!</span> This is a blue alert message.
  </p>
</div>

<div class="bg-slate-100 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Secondary alert!</span> This is a slate alert message.
  </p>
</div>

<div class="bg-green-100 rounded text-green-700 border border-green-300 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Success alert!</span> This is a green message.
  </p>
</div>

<div class="bg-red-100 rounded text-red-700 border border-red-400 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Danger alert!</span> This is a red alert message.
  </p>
</div>

<div class="bg-yellow-100 rounded text-yellow-700 border border-yellow-300 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-yellow-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Warning alert!</span> This is a yellow alert message.
  </p>
</div>

<div class="bg-sky-100 rounded text-sky-700 border border-sky-400 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-sky-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Info alert!</span> This is a sky alert message.
  </p>
</div>

<div class="bg-slate-50 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Light alert!</span> This is a slate alert message.
  </p>
</div>

<div class="bg-gray-200 rounded text-gray-900 border border-gray-400 px-5 py-4 mb-4" role="alert">
  <p class="text-sm flex">
    <svg class="w-4 fill-gray-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="font-medium ml-2.5">Dark alert!</span> This is a gray alert message.
  </p>
</div>

We added Font Awesome in this component.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="bg-blue-100 rounded text-blue-700 border border-blue-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Primary alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-blue-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-slate-100 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Secondary alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-slate-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-green-100 rounded text-green-700 border border-green-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Success alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-green-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-red-100 rounded text-red-700 border border-red-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Danger alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-red-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-yellow-100 rounded text-yellow-700 border border-yellow-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Warning alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-yellow-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-sky-100 rounded text-sky-700 border border-sky-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Info alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-sky-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div  class="bg-slate-50 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Light alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-slate-300 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

<div class="bg-gray-200 rounded text-gray-900 border border-gray-400 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1">Dark alert!</h4>
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <hr class="border-t-1 border-gray-400 my-3 block" />
  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus!</p>
</div>

Additional content with buttons

Alerts can also contain additional HTML elements like headings, paragraphs and buttons.

<div class="bg-blue-100 rounded text-blue-700 border border-blue-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-blue-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Primary alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-blue-700 bg-blue-700 hover:bg-blue-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-blue-700 hover:bg-blue-700 hover:bg-blue-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-slate-100 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Secondary alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore,cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-slate-700 bg-slate-700 hover:bg-slate-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-slate-700 hover:bg-slate-700 hover:bg-slate-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-green-100 rounded text-green-700 border border-green-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Success alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-green-700 bg-green-700 hover:bg-green-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-green-700 hover:bg-green-700 hover:bg-green-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-red-100 rounded text-red-700 border border-red-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Danger alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-red-700 bg-red-700 hover:bg-red-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-red-700 hover:bg-red-700 hover:bg-red-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-yellow-100 rounded text-yellow-700 border border-yellow-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-yellow-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Warning alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-yellow-700 bg-yellow-700 hover:bg-yellow-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-yellow-700 hover:bg-yellow-700 hover:bg-yellow-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-sky-100 rounded text-sky-700 border border-sky-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-sky-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Info alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-sky-700 bg-sky-700 hover:bg-sky-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-sky-700 hover:bg-sky-700 hover:bg-sky-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-slate-50 rounded text-slate-700 border border-slate-300 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Light alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-slate-700 bg-slate-700 hover:bg-slate-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-slate-700 hover:bg-slate-700 hover:bg-slate-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

<div class="bg-gray-200 rounded text-gray-900 border border-gray-400 px-5 py-4 mb-4" role="alert">
  <h4 class="text-lg font-semibold mb-1 flex">
    <svg class="w-4 fill-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
    </svg>
    <span class="ml-2">Dark alert!</span>
  </h4>
  <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, minus ducimus! Nisi animi voluptatem reiciendis autem, ratione quo inventore, cumque illum delectus aliquam ea dolore.</p>
  <button class="text-sm border border-gray-700 bg-gray-700 hover:bg-gray-800 transition text-white px-2 py-1 rounded-lg mr-1">Read more</button>
  <button class="text-sm border border-gray-700 hover:bg-gray-700 hover:bg-gray-800 transition hover:text-white px-2 py-1 rounded-lg">Dismiss</button>
</div>

We added Font Awesome in this component.