<div class="bg-danger-100 border border-danger-400 text-danger-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Holy smokes!</strong>
  <span class="block sm:inline">Something seriously bad happened.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <span class="material-icons">close</span>
  </span>
</div>


<div class="p-2 bg-info-800 items-center text-info-100 leading-none flex lg:rounded-full lg:inline-flex" role="alert">
  <span class="flex rounded-full bg-info-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
  <span class="font-semibold mr-2 text-left flex-auto">Get the coolest tech from our brand new store</span>
  <span class="material-icons">keyboard_arrow_right</span>
</div>


<div class="bg-primary-100 border-l-4 border-primary-500 text-primary-700 p-4 mb-3" role="alert">
  <p class="font-bold">Be Warned</p>
  <p>Something not ideal might be happening.</p>
</div>


<div role="alert">
  <div class="bg-danger-500 text-white font-bold rounded-t px-4 py-2">
    Danger
  </div>
  <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
    <p>Something not ideal might be happening.</p>
  </div>
</div>


<div class="flex items-center bg-info-500 text-white text-sm font-bold px-4 py-3" role="alert">
  <span class="material-icons mr-2">new_releases</span>
    <p>Something happened that you should know about.</p>
</div>


<div class="bg-primary-100 border-t-4 border-primary-500 rounded-b text-primary-600 px-4 py-3 shadow-md mb-5" role="alert">
    <div class="flex">
        <div class="py-1"><span class="material-icons text-success mr-2">error_outline</span></div>
        <div>
            <p class="font-bold">Our privacy policy has changed</p>
            <p class="text-sm">Make sure you know how these changes affect you.</p>
        </div>
    </div>
</div>

<div class="ul-alert bg-primary-100 text-primary-500 text-sm font-bold mb-3" role="alert">
  <p>Something happened that you should know about. 🤙  </p>
</div>
<div class="ul-alert bg-primary-100 text-primary-500 text-sm font-bold mb-3" role="alert">
  <p>Something happened that you should know about. 🎏  </p>
</div>
<div class="ul-alert bg-danger-100 text-danger-500 text-sm font-bold mb-3" role="alert">
  <p>Something happened that you should know about. 🥕  </p>
</div>
<div class="ul-alert bg-info-100 text-info-500 text-sm font-bold mb-3" role="alert">
  <p>Something happened that you should know about. 🍎  </p>
</div>
<div class="ul-alert bg-warning-100 text-warning-500 text-sm font-bold mb-3" role="alert">
  <p>Something happened that you should know about. 😕 </p>
</div>


<div class="ul-alert border-t border-primary-500 bg-primary-100 text-primary-500 text-sm font-bold mb-3" role="alert">
  <p>🚀  Something happened that you should know about. 🚀  </p>
</div>
<div class="ul-alert border-b border-danger-500 bg-danger-100 text-danger-500 text-sm font-bold mb-3" role="alert">
  <p>🌵   Something happened that you should know about. 🌵   </p>
</div>
<div class="ul-alert border-l border-primary-500 bg-primary-100 text-primary-500 text-sm font-bold mb-3" role="alert">
  <p>📅    Something happened that you should know about. 🌵   </p>
</div>
<div class="ul-alert border-r border-info-500 bg-info-100 text-info-500 text-sm font-bold mb-3" role="alert">
  <p>📅    Something happened that you should know about. 🌵   </p>
</div>