Modals 02

<div class="container mx-auto items-center text-center">
<div class="py-3 lg:pt-6 lg:pb-8 px-6 rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex flex-col justify-center items-center">
  <div class="bg-gray-200 rounded-full h-16 w-16 mb-4 flex justify-center 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="M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z" clip-rule="evenodd" />
    </svg>
  </div>
  <span class="text-lg lg:text-2xl font-semibold text-gray-700">Happy birthday</span>
  <p class="block mt-2 font-semibold text-center">Breakfast procuring nay end happiness allowance assurance.</p>
  <div class="pt-4 border-t border-gray-300 w-full mt-4">
    <a href="#" class="w-full bg-gray-200 hover:bg-gray-300 block text-center py-3 font-semibold">
      Use your coupon
    </a>
  </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="py-3 lg:pt-6 lg:pb-8 px-6 rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex flex-col justify-center items-center">
  <div class="bg-gray-200 rounded-full h-16 w-16 mb-4 flex justify-center 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="M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z" clip-rule="evenodd" />
    </svg>
  </div>
  <span class="text-lg lg:text-2xl font-semibold text-gray-700">Happy birthday</span>
  <p class="block mt-2 font-semibold text-center">Breakfast procuring nay end happiness allowance assurance.</p>
  <div class="pt-4 border-t border-gray-300 w-full mt-4">
    <a href="#" class="w-full bg-gray-200 hover:bg-gray-300 block text-center py-3 font-semibold">
      Use your coupon
    </a>
  </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>
            
          
        