Alerts

<div class="alert mb-6" role="alert">
  <div class="flex items-start justify-start">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="asrxbzukge6uica20nbtl9rdo7wwganv" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="asrxbzukge6uica20nbtl9rdo7wwganv">Icons/buoy</title><path d="M17.16 6.42a8.03 8.03 0 0 0-3.58-3.58l-1.34 2.69a5.02 5.02 0 0 1 2.23 2.23l2.69-1.34zm0 7.16l-2.69-1.34a5.02 5.02 0 0 1-2.23 2.23l1.34 2.69a8.03 8.03 0 0 0 3.58-3.58zM6.42 2.84a8.03 8.03 0 0 0-3.58 3.58l2.69 1.34a5.02 5.02 0 0 1 2.23-2.23L6.42 2.84zM2.84 13.58a8.03 8.03 0 0 0 3.58 3.58l1.34-2.69a5.02 5.02 0 0 1-2.23-2.23l-2.69 1.34zM10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path></svg>

    <div>
      <h4 class="font-black text-sm uppercase tracking">General Alert</h4>
      <p class="leading-normal">Additional text for context goes here</p>
    </div>
  </div>
</div>

<div class="alert alert-info mb-6" role="alert">
  <div class="flex items-start justify-start">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="atvvj3jd2ay165kj0tn8tl3mefxdsc42" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="atvvj3jd2ay165kj0tn8tl3mefxdsc42">Icons/conversation</title><path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path></svg>

    <div>
      <h4 class="font-black text-sm uppercase tracking">Info Alert</h4>
      <p class="leading-normal">Additional text for context goes here</p>
    </div>
  </div>
</div>

<div class="alert alert-success mb-6" role="alert">
  <div class="flex items-start justify-start">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="ar6aljr4129olkcm0e06g00mu0yr4wcl" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="ar6aljr4129olkcm0e06g00mu0yr4wcl">Icons/checkmark</title><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path></svg>

    <div>
      <h4 class="font-black text-sm uppercase tracking">Success Alert</h4>
      <p class="leading-normal">Additional text for context goes here</p>
    </div>
  </div>
</div>

<div class="alert alert-error mb-6" role="alert">
  <div class="flex items-start justify-start">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="atex4yar4o8zyk7h7b5hnf0t7u4sn22n" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="atex4yar4o8zyk7h7b5hnf0t7u4sn22n">Icons/bug</title><path d="M15.3 14.89l2.77 2.77a1 1 0 0 1 0 1.41 1 1 0 0 1-1.41 0l-2.59-2.58A5.99 5.99 0 0 1 11 18V9.04a1 1 0 0 0-2 0V18a5.98 5.98 0 0 1-3.07-1.51l-2.59 2.58a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41l2.77-2.77A5.95 5.95 0 0 1 4.07 13H1a1 1 0 1 1 0-2h3V8.41L.93 5.34a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.1 2.1h11.12l2.1-2.1a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41L16 8.41V11h3a1 1 0 1 1 0 2h-3.07c-.1.67-.32 1.31-.63 1.89zM15 5H5a5 5 0 1 1 10 0z"></path></svg>

    <div>
      <h4 class="font-black text-sm uppercase tracking">Error/Danger Alert</h4>
      <p class="leading-normal">Additional text for context goes here</p>
    </div>
  </div>
</div>

<div class="alert alert-warning mb-6" role="alert">
  <div class="flex items-start justify-start">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="a6lhe01ozlrb6xoz6be99une7w0976h5" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="a6lhe01ozlrb6xoz6be99une7w0976h5">Icons/bookmark</title><path d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18l-8-4-8 4V2z"></path></svg>

    <div>
      <h4 class="font-black text-sm uppercase tracking">Warning Alert</h4>
      <p class="leading-normal">Additional text for context goes here</p>
    </div>
  </div>
</div>