Componente de mensajes de alerta

<div class="p-4 sm:p-8 bg-gray-900 dark:bg-black min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-500 mb-8 sm:mb-12 text-center">
    Consulting Service Alerts
  </h2>

  <div class="max-w-4xl mx-auto space-y-6 sm:space-y-8">

    <!-- Success Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-emerald-900/40 border border-emerald-700 dark:bg-emerald-950/60 dark:border-emerald-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-emerald-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-200 mb-1">Success! Your Request Has Been Processed.</h3>
        <p class="text-sm sm:text-base text-emerald-300 leading-relaxed">
          Thank you for choosing our consulting services. Your recent inquiry has been successfully submitted and our team will get back to you shortly.
        </p>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-emerald-400 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-orange-900/40 border border-orange-700 dark:bg-orange-950/60 dark:border-orange-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-orange-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-200 mb-1">Upcoming Changes to Our Service Offerings.</h3>
        <p class="text-sm sm:text-base text-orange-300 leading-relaxed">
          Please be aware of upcoming adjustments to our service packages starting next quarter. We encourage you to review the updated terms and conditions on our website.
        </p>
        <a href="#" class="text-sm sm:text-base text-orange-200 mt-2 inline-block underline hover:text-orange-100">Learn more about changes</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-orange-400 hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Information Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-blue-900/40 border border-blue-700 dark:bg-sky-950/60 dark:border-sky-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-blue-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-200 mb-1">New Whitepaper Available: Future of Digital Consulting.</h3>
        <p class="text-sm sm:text-base text-blue-300 leading-relaxed">
          Explore our latest insights on the evolving landscape of digital consulting. Download our new whitepaper for free today!
        </p>
        <button class="mt-3 px-4 py-2 bg-blue-700 text-blue-100 rounded-md hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900 dark:focus:ring-offset-transparent text-sm sm:text-base">
          Download Now
        </button>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-blue-400 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-red-900/40 border border-red-700 dark:bg-red-950/60 dark:border-red-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-red-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-red-200 mb-1">Action Required: Incomplete Profile Information.</h3>
        <p class="text-sm sm:text-base text-red-300 leading-relaxed">
          Your user profile is incomplete. Please update your details to ensure uninterrupted access to all our premium consulting resources.
        </p>
        <a href="#" class="text-sm sm:text-base text-red-200 mt-2 inline-block underline hover:text-red-100">Update Profile</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-red-400 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>