Alert SaaS Brutalist

                <!--
@type: Alert
@industry: SaaS
@style: Brutalist
@category: UI Element
@framework: Tailwind
@license: Free
-->

<style>
  .brutalist-shadow {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .brutalist-shadow-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
</style>

<section id="system-alerts" class="bg-white py-24 px-6 font-mono border-t-8 border-black relative">
  <div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-1 gap-6">
      <div
        class="bg-white border-4 border-black p-6 brutalist-shadow flex flex-col md:flex-row items-center gap-6 group hover:bg-neutral-900 hover:text-white transition-colors">
        <div
          class="bg-black text-white group-hover:bg-cyan-400 group-hover:text-black px-6 py-4 border-2 border-black font-black uppercase text-xl italic min-w-[180px] text-center">
          Critical_
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-black uppercase tracking-tight">Latency Spike Detected: Cluster_B</h3>
          <p class="font-bold uppercase text-sm opacity-70">Timestamp: 09:42:11 UTC | Status: rerouting traffic to
            failover nodes</p>
        </div>
        <div class="flex gap-4">
          <button
            class="border-2 border-black px-4 py-2 font-black uppercase text-sm brutalist-shadow-sm bg-cyan-400 text-black hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all">
            Inspect_
          </button>
        </div>
      </div>

      <div class="bg-cyan-400 border-4 border-black p-6 brutalist-shadow flex flex-col md:flex-row items-center gap-6">
        <div
          class="bg-white text-black px-6 py-4 border-2 border-black font-black uppercase text-xl italic min-w-[180px] text-center">
          Resolve_
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-black uppercase tracking-tight">Optimization Cycle Complete</h3>
          <p class="font-bold uppercase text-sm opacity-90">Result: Kernel prunned 4.2GB of redundant cache objects
            across global mesh.</p>
        </div>
        <div class="flex gap-4">
          <button
            class="border-2 border-black px-4 py-2 font-black uppercase text-sm brutalist-shadow-sm bg-black text-white hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all">
            Logs_
          </button>
        </div>
      </div>

      <div
        class="bg-neutral-100 border-4 border-black p-6 brutalist-shadow flex flex-col md:flex-row items-center gap-6">
        <div
          class="bg-neutral-300 text-black px-6 py-4 border-2 border-black font-black uppercase text-xl italic min-w-[180px] text-center">
          Active_
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-black uppercase tracking-tight">New Node Propagation: Frankfurt_04</h3>
          <p class="font-bold uppercase text-sm opacity-70">Provisioning 64-core bare metal instance for regional
            overflow.</p>
        </div>
        <div class="flex gap-4">
          <div class="w-12 h-12 border-4 border-black bg-white flex items-center justify-center font-black">
            88%
          </div>
        </div>
      </div>
    </div>
  </div>
</section>