Error:
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded" role="alert">
      <strong class="font-bold">Holy smokes!</strong><br />
      <span class="block sm:inline">Something seriously bad happened.</span>
    </div>
    <hr class="my-2" />
    Warn:
    <div class="bg-yellow-100 border border-yellow-500 text-yellow-700 p-4 rounded" role="alert">
      <p class="font-bold">Be Warned</p>
      <p>Something not ideal might be happening.</p>
    </div>
    <hr class="my-2" />
    info:
    <div class="bg-blue-100 border border-blue-500 text-blue-700 px-4 py-3 rounded" role="alert">
      <p class="font-bold">Informational message</p>
      <p class="text-sm">Some additional text to explain said message.</p>
    </div>