Modals 06

            
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:py-6 px-6 rounded-lg shadow-lg  text-gray-600 relative flex flex-col items-center">
  <div class="bg-gray-200 rounded-full h-20 w-20 mb-4 flex justify-center items-center">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
  </div>
  <span class="text-lg lg:text-xl font-semibold text-gray-700">Do you want to delete this?</span>
  <p class="block mt-2 font-semibold">Small delete card with a icon.</p>
  <div class="flex flex-row space-x-2">
    <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Delete</a>
    <a href="#" class="inline-block bg-gray-400 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Cancel</a>
  </div>
</div>
</div>