Componente de mensajes de alerta

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="mx-auto max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-green-100 text-green-800 border border-green-200 dark:bg-green-700 dark:text-green-50 dark:border-green-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-green-600 dark:text-green-50" 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 class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Success! Your operation was completed.</h3>
        <p class="mt-1 text-sm">The data has been successfully saved to the cloud. You can now view the changes in your dashboard.</p>
      </div>
      <button class="p-1 rounded-full text-green-600 hover:bg-green-200 dark:text-green-50 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/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 role="alert" class="p-4 rounded-lg shadow-md bg-red-100 text-red-800 border border-red-200 dark:bg-red-700 dark:text-red-50 dark:border-red-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-50" 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 class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Error! Something went wrong.</h3>
        <p class="mt-1 text-sm">Failed to process your request. Please try again later or contact support if the problem persists.</p>
      </div>
      <button class="p-1 rounded-full text-red-600 hover:bg-red-200 dark:text-red-50 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/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>

    <!-- Info Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-700 dark:text-blue-50 dark:border-blue-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-50" 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 class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Information! Please note this important update.</h3>
        <p class="mt-1 text-sm">We have updated our privacy policy. Please review the new terms to continue using our services.</p>
      </div>
      <button class="p-1 rounded-full text-blue-600 hover:bg-blue-200 dark:text-blue-50 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/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 role="alert" class="p-4 rounded-lg shadow-md bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-700 dark:text-yellow-50 dark:border-yellow-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-yellow-600 dark:text-yellow-50" 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 class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Warning! Your session will expire soon.</h3>
        <p class="mt-1 text-sm">You have 5 minutes left before your current session times out. Please save your work to avoid data loss.</p>
      </div>
      <button class="p-1 rounded-full text-yellow-600 hover:bg-yellow-200 dark:text-yellow-50 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/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>