Marketplace Alert Messages Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Success Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 ring-1 ring-green-200 dark:ring-green-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" 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 class="flex-1">
      <h3 class="text-lg font-semibold">Success! Your listing has been published.</h3>
      <p class="text-sm opacity-90">Buyers can now view and purchase your amazing product. Good luck!</p>
    </div>
    <button type="button" class="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-800 dark:text-green-300 dark:hover:bg-green-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" 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>

  <!-- Warning Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 ring-1 ring-yellow-200 dark:ring-yellow-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" 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 0l8.601 15.354c.763 1.36-.217 3.047-1.748 3.047H1.404c-1.53 0-2.51-1.687-1.747-3.047l8.604-15.354zM11 15a1 1 0 11-2 0 1 1 0 012 0zm-1-6a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Heads up! Some listings are missing images.</h3>
      <p class="text-sm opacity-90">Listings with images tend to have higher engagement. Please update them soon.</p>
    </div>
    <button type="button" class="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-800 dark:text-yellow-300 dark:hover:bg-yellow-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" 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>

  <!-- Error Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 ring-1 ring-red-200 dark:ring-red-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" 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-9a1 1 0 011-1h1.586l-.293-.293a1 1 0 011.414-1.414l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414l.293-.293H4a1 1 0 01-1-1zm11-1a1 1 0 00-1-1h-1.586l.293-.293a1 1 0 00-1.414-1.414l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414l-.293-.293H16a1 1 0 001-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Error! Publishing failed for item #12345.</h3>
      <p class="text-sm opacity-90">There was an issue processing your request. Please check your data and try again.</p>
    </div>
    <button type="button" class="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-800 dark:text-red-300 dark:hover:bg-red-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" 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>

  <!-- Info Alert with Action Button (Autumn Colors) -->
  <div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg shadow-md bg-amber-100 dark:bg-amber-800 text-amber-900 dark:text-amber-100 ring-1 ring-amber-200 dark:ring-amber-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-0 sm:mr-3 mb-2 sm:mb-0 flex-shrink-0" 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 class="flex-1">
      <h3 class="text-lg font-semibold">Important Update: Our commission rates are changing.</h3>
      <p class="text-sm opacity-90">Starting November 1st, a new commission structure will be applied to all sales. Review the details to stay informed.</p>
    </div>
    <div class="flex items-center mt-3 sm:mt-0 ml-0 sm:ml-4 flex-shrink-0">
      <button type="button" class="bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-800 text-white font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors duration-200 ease-in-out">View Details</button>
      <button type="button" class="ml-2 -mx-1.5 -my-1.5 bg-amber-100 text-amber-500 rounded-lg focus:ring-2 focus:ring-amber-400 p-1.5 hover:bg-amber-200 inline-flex h-8 w-8 dark:bg-amber-800 dark:text-amber-300 dark:hover:bg-amber-700" aria-label="Dismiss">
        <span class="sr-only">Dismiss</span>
        <svg class="w-5 h-5" 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>