Alert Messages Component

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-300 mb-8 text-center">Alert Messages</h2>

  <!-- Success Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-blue-50 dark:bg-blue-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-blue-200 dark:border-blue-800">
      <div class="flex-shrink-0 text-blue-600 dark:text-blue-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-800 dark:text-blue-200">Donation Successful!</h3>
        <p class="text-sm sm:text-base text-blue-700 dark:text-blue-300 mt-1">Thank you for your generous contribution. Your support helps us provide clean water to communities in need.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-indigo-200 dark:border-indigo-800">
      <div class="flex-shrink-0 text-indigo-600 dark:text-indigo-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-indigo-800 dark:text-indigo-200">Event Reminder</h3>
        <p class="text-sm sm:text-base text-indigo-700 dark:text-indigo-300 mt-1">Join us for our annual Charity Gala on November 15th! Purchase your tickets now to support education programs.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-indigo-700 dark:text-indigo-300 bg-white dark:bg-transparent border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 hidden sm:block">
        <img src="https://picsum.photos/id/1084/100/100" alt="Event image" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover shadow-sm">
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-orange-200 dark:border-orange-800">
      <div class="flex-shrink-0 text-orange-600 dark:text-orange-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 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"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-800 dark:text-orange-200">Urgent Action Required!</h3>
        <p class="text-sm sm:text-base text-orange-700 dark:text-orange-300 mt-1">Our emergency food drive ends in 48 hours. Please consider donating non-perishable items to help local families.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-orange-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-red-50 dark:bg-red-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-red-200 dark:border-red-800">
      <div class="flex-shrink-0 text-red-600 dark:text-red-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-red-800 dark:text-red-200">Payment Processing Error</h3>
        <p class="text-sm sm:text-base text-red-700 dark:text-red-300 mt-1">Oops! There was an issue processing your last donation. Please check your payment details or try again later.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Interactive Success Alert with Avatar -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg bg-emerald-50 dark:bg-emerald-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-emerald-200 dark:border-emerald-800">
      <div class="flex-shrink-0 flex justify-center items-center h-full text-emerald-600 dark:text-emerald-400 mb-4 sm:mb-0 sm:mr-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Supporter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover shadow-sm border-2 border-emerald-300 dark:border-emerald-700">
      </div>
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200">Thank you, Sarah J.!</h3>
        <p class="text-sm sm:text-base text-emerald-700 dark:text-emerald-300 mt-1">Your recent contribution of $100 has been successfully received. We are incredibly grateful for your continued support.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:justify-start">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            View Impact
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-4a1 1 0 01-1.414-1.414L8.586 10l-1.293-1.293a1 1 0 111.414-1.414L10 8.586l1.293-1.293a1 1 0 111.414 1.414L11.414 10l1.293 1.293a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-emerald-700 dark:text-emerald-300 bg-white dark:bg-transparent border border-emerald-300 dark:border-emerald-700 hover:bg-emerald-100 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            Share on Social
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 self-start hidden sm:block">
         <button type="button" class="flex-shrink-0 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
      </div>
    </div>
  </div>

</div>