Monospace_Developer_Alert_Messages_Component

<div class="font-mono p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100 border-b-2 border-gray-300 dark:border-gray-700 pb-2">
    System Alerts <span class="text-green-500">_</span>
  </h1>

  <!-- Success Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-green-600 bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-green-600 dark:text-green-500" 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 sm:text-xl font-bold dark:text-green-300">[SUCCESS] Operation Complete</h3>
        <p class="text-sm sm:text-base mt-1">Files synchronized successfully. Total <code>24</code> items updated. Log ID: <span class="bg-green-100 dark:bg-gray-700 rounded px-1 py-0.5 text-green-900 dark:text-green-400 text-xs"><code>#SYS_LOG_20231027_001</code></span></p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-green-100 dark:bg-gray-700 text-green-900 dark:text-green-400 rounded overflow-x-auto whitespace-pre-wrap"><code>console.log('Sync successful at ' + new Date().toISOString());</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-green-500 dark:bg-green-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>View Log Details</code>
          </button>
          <button class="px-4 py-2 text-green-800 dark:text-green-400 border border-green-600 dark:border-green-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Dismiss</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-yellow-600 bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-yellow-600 dark:text-yellow-500" 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.92zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 102 0V6a1 1 0 10-2 0v3z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-yellow-300">[WARNING] Disk Usage Critical</h3>
        <p class="text-sm sm:text-base mt-1">Storage <code>/dev/sda1</code> is at <span class="bg-yellow-100 dark:bg-gray-700 rounded px-1 py-0.5 text-yellow-900 dark:text-yellow-400 text-xs"><code>92%</code></span> capacity. Consider clearing old logs.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-yellow-100 dark:bg-gray-700 text-yellow-900 dark:text-yellow-400 rounded overflow-x-auto whitespace-pre-wrap"><code>df -h /dev/sda1
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1       98G   90G  4.5G  92% /</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-yellow-500 dark:bg-yellow-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Optimize Storage</code>
          </button>
          <button class="px-4 py-2 text-yellow-800 dark:text-yellow-400 border border-yellow-600 dark:border-yellow-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Acknowledge</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-red-600 bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-red-600 dark:text-red-500" 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.586l-1.293-1.293z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-red-300">[ERROR] Database Connection Failed</h3>
        <p class="text-sm sm:text-base mt-1">Failed to establish connection to <code>production_db</code>. Error code: <span class="bg-red-100 dark:bg-gray-700 rounded px-1 py-0.5 text-red-900 dark:text-red-400 text-xs"><code>DB-ERR-503</code></span>. Check network.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-red-100 dark:bg-gray-700 text-red-900 dark:text-red-400 rounded overflow-x-auto whitespace-pre-wrap"><code>{ "timestamp": "2023-10-27T10:30:00Z"