Retro_Alert_Messages_Component

<div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="max-w-md mx-auto space-y-4">

    <!-- Success Alert -->
    <div class="relative p-4 border-2 border-green-500 bg-black text-green-500 shadow-neon-green overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-green-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Operation Success!</h3>
          <p class="text-sm">Your data has been successfully processed.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="relative p-4 border-2 border-blue-500 bg-black text-blue-500 shadow-neon-blue overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-blue-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Information Update</h3>
          <p class="text-sm">New dashboard features are available for testing.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="relative p-4 border-2 border-yellow-500 bg-black text-yellow-500 shadow-neon-yellow overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-yellow-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Caution Advised</h3>
          <p class="text-sm">Potential data discrepancies detected in report #345.</p>
        </div>
      </div>
    </div>

    <!-- Error Alert -->
    <div class="relative p-4 border-2 border-red-500 bg-black text-red-500 shadow-neon-red overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-red-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">System Error!</h3>
          <p class="text-sm">Failed to connect to the backend server. Please retry.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is an example of including custom CSS for the retro effect within the HTML. */
  /* In a real scenario, this would ideally be in a separate CSS file or configured via Tailwind JIT/config */

  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    0% { filter: drop-shadow(0 0 0px var(--neon-color)); }
    100% { filter: drop-shadow(0 0 5px var(--neon-color)) drop-shadow(0 0 15px var(--neon-color)) drop-shadow(0 0 30px var(--neon-color)); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  /* Neon Glow Shadows (for retro effect) */
  .shadow-neon-green {
    --neon-color: theme('colors.green.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-blue {
    --neon-color: theme('colors.blue.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-yellow {
    --neon-color: theme('colors.yellow.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-red {
    --neon-color: theme('colors.red.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  /* Utility for dark mode background, not part of the component itself but for demonstration */
  body {
    transition: background-color 0.3s ease-in-out;
  }
  body.dark {
    background-color: theme('colors.gray.900');
  }
</style>