DOCUMENTATION

<div class="relative flex justify-between p-4 mb-4 text-white bg-blue-500 border-0 rounded">
<span>A simple primary alert with
    <a class="font-bold text-gray-400">an example link</a>
    . Give it a click if you like.
</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
</button>
</div>

<div class="mt-4">
<div class="relative flex justify-between p-4 mb-4 text-white bg-blue-100 border-2 border-blue-500 rounded">
    <span class="text-blue-500">A simple primary alert with
    <a class="font-bold text-blue-800">an example link.</a>
    Give it a click if you like.
    </span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
        <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
</div>

<div class="mt-4">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="check-circle-fill" fill="#12703a" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
    </symbol>
    <symbol id="info-fill" fill="blue" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
    </symbol>
    <symbol id="exclamation-triangle-fill" fill="#a94a13" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
    </symbol>
    <symbol id="exclamation-triangle-fill1" fill="#862317" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
    </symbol>
</svg>
<div class="relative flex justify-start p-4 mb-4 text-blue-600 bg-blue-100 border-2 border-blue-500 rounded">
    <svg class="flex-shrink-0 mr-2" width="24" height="24">
    <use xlink:href="#info-fill"></use>
    </svg>
    <div>An example alert with an icon</div>
</div>
<div
    class="relative flex justify-start p-4 mb-4 text-green-600 bg-green-100 border-2 border-green-500 rounded">
    <svg class="flex-shrink-0 mr-2" width="24" height="24">
    <use xlink:href="#check-circle-fill"></use>
    </svg>
    <div>An example success alert with an icon</div>
</div>
<div
    class="relative flex justify-start p-4 mb-4 text-orange-600 bg-orange-100 border-2 border-orange-500 rounded">
    <svg class="flex-shrink-0 mr-2" width="24" height="24">
    <use xlink:href="#exclamation-triangle-fill"></use>
    </svg>
    <div>An example warning alert with an icon</div>
</div>
<div
    class="relative flex justify-start p-4 mb-4 text-red-600 bg-red-100 border-2 border-red-500 rounded">
    <svg class="flex-shrink-0 mr-2" width="24" height="24">
    <use xlink:href="#exclamation-triangle-fill1"></use>
    </svg>
    <div>An example danger alert with an icon</div>
</div>
</div>

<div class="mt-4 ">
<div
    class="relative flex justify-between p-4 mb-4 text-green-600 bg-green-100 border-l-4 border-green-500 rounded ">
    <span> This is a success alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
    onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
<div class="relative flex justify-between p-4 mb-4 border-t-4 rounded text-cyan-600 bg-cyan-100 border-cyan-500">
    <span> This is a info alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-orange-600 bg-orange-100 border-r-4 border-orange-500 rounded">
    <span> This is a warning alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-red-600 bg-red-100 border-b-4 border-red-500 rounded">
    <span> This is a danger alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
</div>

<div class="mt-4">
<div class="relative flex justify-between p-4 mb-4 text-orange-600 bg-orange-100 border-2 border-orange-500">
    <span> This is a warning alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-white bg-orange-500 ">
    <span> This is a warning alert—check it out!</span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
    <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
    <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
    </svg>
    </button>
</div>
</div>

<div class="mt-4">
<div class="relative p-4 mb-4 text-green-600 bg-green-100 border-2 border-green-500 rounded">
    <h5 class="text-xl font-medium">Well done!</h5>
    <p class="mb-4">Aww yeah, you successfully read this important alert message. This example text is
    going to run a bit longer so that you can see how spacing within an alert works with this kind of
    content.</p>
    <hr class="mb-4 text-green-500 border-green-500">
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
    </p>
</div>
</div>    
        

function closeAlert(event) {
  let element = event.target;
  while (element.nodeName !== "BUTTON") {
    element = element.parentNode;
  }
  element.parentNode.parentNode.removeChild(element.parentNode);
}