Alerts

<div class="p-3 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert">
    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-3 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
    <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-3 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
    <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</div>
<div class="flex p-3 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-200 dark:text-yellow-800" role="alert">
    <i class="fas fa-triangle-exclamation inline flex-shrink-0 text-yellow-700 mr-2  self-center"></i>                                   
    <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div>                                        
<div class="flex p-3 mb-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300" role="alert">
    <i class="fas fa-triangle-exclamation inline flex-shrink-0 text-gray-700 mr-2 self-center"></i>
    <div>
        <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
    </div>
</div>

<div class="flex p-3 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-blue-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-blue-700 dark:text-blue-800">
      A simple info alert with an <a href="#" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300 alert-hidden">
      
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div  class="flex p-3 mb-4 bg-red-100 rounded-lg dark:bg-red-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-red-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-red-700 dark:text-red-800">
      A simple info alert with an <a href="#" class="font-semibold underline hover:text-red-800 dark:hover:text-red-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300 alert-hidden">
      
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="flex p-3 mb-4 bg-green-100 rounded-lg dark:bg-green-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-green-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-green-700 dark:text-green-800">
      A simple info alert with an <a href="#" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300 alert-hidden">
      
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div id="alert-4" class="flex p-3 mb-4 bg-yellow-100 rounded-full dark:bg-yellow-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-yellow-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
      A simple info alert with an <a href="#" class="font-semibold underline hover:text-yellow-800 dark:hover:text-yellow-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300 alert-hidden" data-dismiss-target="#alert-4" aria-label="Close">
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div id="alert-5" class="flex p-3 mb-4 bg-gray-100 rounded-full dark:bg-gray-700" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-gray-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
      A simple dark alert with an <a href="#" class="font-semibold underline hover:text-gray-800 dark:hover:text-white">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white alert-hidden" data-dismiss-target="#alert-5" aria-label="Close">
      <i class="fas fa-xmark"></i>
    </button>
</div>

                                       
<div class="p-3 mb-4 text-sm text-red-700 border border-dashed border-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
    <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="flex p-3 mb-4 border border-dashed border-green-700 bg-green-100 rounded-lg dark:bg-green-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-green-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-green-700 dark:text-green-800">
        A simple info alert with an <a href="#" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300 alert-hidden">
        
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="flex p-3 mb-4 border border-dashed border-yellow-700 text-sm text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-200 dark:text-yellow-800" role="alert">
    <i class="fas fa-triangle-exclamation inline flex-shrink-0 text-yellow-700 mr-2  self-center"></i>                                   
    <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div> 

<div class="p-3 mb-4 text-sm text-red-700 border border-red-700 bg-transparent rounded-lg dark:bg-transparent dark:text-red-800" role="alert">
    <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="flex p-3 mb-4 border border-green-700 bg-transparent rounded-lg dark:transparent" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-green-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-green-700 dark:text-green-800">
      A simple info alert with an <a href="#" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300 alert-hidden">
      
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="flex p-3 mb-4 border border-dashed border-yellow-700 text-sm text-yellow-700 bg-transparent rounded-lg dark:bg-transparent dark:text-yellow-800" role="alert">
    <i class="fas fa-triangle-exclamation inline flex-shrink-0 text-yellow-700 mr-2  self-center"></i>                                   
    <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div> 
<div id="alert-5" class="flex p-3 mb-4 border border-dashed border-gray-700 bg-transparent rounded-full dark:bg-transparent" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-gray-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
      A simple dark alert with an <a href="#" class="font-semibold underline hover:text-gray-800 dark:hover:text-white">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-full focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white alert-hidden" data-dismiss-target="#alert-5" aria-label="Close">
      <i class="fas fa-xmark"></i>
    </button>
</div>

<div class="flex p-3 mb-4 bg-yellow-100 border-t-4 border-yellow-500 dark:bg-yellow-200" role="alert">
    <i class="fas fa-triangle-exclamation flex-shrink-0 text-yellow-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-yellow-700">
      A simple danger alert with an <a href="#" class="font-semibold underline hover:text-yellow-800">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-yellow-100 dark:bg-yellow-200 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 dark:hover:bg-yellow-300 inline-flex h-8 w-8 alert-hidden">
      <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="flex p-3 mb-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-700" role="alert">
  <i class="fas fa-triangle-exclamation flex-shrink-0 text-gray-700 self-center"></i>
    <div class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
      A simple dark alert with an <a href="#" class="font-semibold underline hover:text-gray-800 dark:hover:text-white">example link</a>. Give it a click if you like.
    </div>
    <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white alert-hidden">
      <i class="fas fa-xmark"></i>
    </button>
</div>

<div class="p-4 bg-primary-50 rounded-lg dark:bg-primary-500/10" role="alert">
    <div class="flex items-center">
      <i class="fas fa-triangle-exclamation flex-shrink-0 text-primary-500 dark:text-primary-400 mr-2"></i>
      <h3 class="text-lg font-medium text-primary-700 dark:text-primary-300">This is a info alert</h3>
    </div>
    <div class="mt-2 mb-4 text-sm text-primary-700 dark:text-primary-400">
      More info about this info alert goes here. 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.
    </div>
    
    <button type="button" class="text-white border border-primary-500 bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-md text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-primary-500 dark:hover:bg-primary-600">
        <i class="far fa-eye flex-shrink-0 text-white mr-2"></i>
        View more
    </button>
    <button type="button" class="alert-hidden px-2 py-1 lg:px-4 bg-transparent  text-primary text-sm  rounded transition hover:bg-primary-500 hover:text-white border border-primary font-medium" data-dismiss-target="#alert-additional-content-1" aria-label="Close">Dismiss</button>                 
</div>