Modals 07

<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex">
  <div class="bg-gray-100 px-4 py-4 flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
    </svg>
  </div>
  <div class="py-3 lg:py-6 px-6 ">
    <span class="text-lg font-semibold text-gray-700">This needs your attention</span>
    <p class="block font-semibold text-sm">Breakfast procuring nay end happiness allowance assurance.</p>
  </div>
  <button class="w-5 h-5 absolute top-3 right-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>
</div>
</div>

Raw

                      
<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex">
  <div class="bg-gray-100 px-4 py-4 flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
    </svg>
  </div>
  <div class="py-3 lg:py-6 px-6 ">
    <span class="text-lg font-semibold text-gray-700">This needs your attention</span>
    <p class="block font-semibold text-sm">Breakfast procuring nay end happiness allowance assurance.</p>
  </div>
  <button class="w-5 h-5 absolute top-3 right-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>
</div>
</div>
            
          
        