Policy Drift Alert Card

<div class="w-full max-w-sm overflow-hidden border rounded-xl shadow-lg shadow-black/30 border-white/10 bg-white/5 backdrop-blur-md">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');</style>
  <header class="p-6 bg-white/5">
    <div class="flex gap-3 items-start">
      <span class="w-9 h-9 flex items-center justify-center rounded-lg bg-indigo-950 shrink-0">
        <i data-lucide="shield-alert" class="w-5 h-5 text-rose-400"></i>
      </span>
      <h2 class="text-sm leading-6 font-light tracking-tight text-gray-100">Policy drift detected between live infrastructure and blueprint</h2>
    </div>
  </header>
  <div class="border-t border-white/10"></div>
  <div class="p-6 space-y-6 bg-white/5">
    <div>
      <h3 class="text-xs text-neutral-400 font-light tracking-tight">OVERVIEW</h3>
      <p class="mt-2 text-sm text-neutral-200 font-light tracking-tight">
        The live S3 bucket policy deviates from the approved security blueprint, potentially exposing data to unauthorized principals.
      </p>
    </div>
    <div class="flex">
      <div class="w-24">
        <h3 class="text-xs text-neutral-400 font-light tracking-tight">IMPACTED</h3>
      </div>
      <ul class="flex flex-wrap gap-2">
        <li class="px-2.5 py-0.5 rounded-md text-xs bg-indigo-900/40 text-indigo-200 font-light tracking-tight">us-east-1</li>
        <li class="px-2.5 py-0.5 rounded-md text-xs bg-pink-900/40 text-pink-200 font-light tracking-tight">prod-logging-bucket</li>
        <li class="px-2.5 py-0.5 rounded-md text-xs bg-green-900/40 text-green-200 font-light tracking-tight">12 objects</li>
      </ul>
    </div>
    <div class="flex">
      <div class="w-24">
        <h3 class="text-xs text-neutral-400 font-light tracking-tight">SOURCE</h3>
      </div>
      <div class="flex items-center gap-2">
        <i data-lucide="git-branch" class="w-4 h-4 text-gray-300"></i>
        <span class="text-sm font-light tracking-tight text-gray-100">acme-secure/bucket_policy.tf</span>
      </div>
    </div>
    <div class="flex">
      <div class="w-24">
        <h3 class="text-xs text-neutral-400 font-light tracking-tight">SEVERITY</h3>
      </div>
      <div class="flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-indigo-400"></span>
        <span class="text-sm font-light tracking-tight text-gray-100">Critical</span>
      </div>
    </div>
    <div class="border-t border-white/10 pt-6">
      <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-neutral-100 text-black px-4 py-2 text-sm hover:bg-neutral-200 transition font-light tracking-tight">
        View remediation guide
        <i data-lucide="external-link" class="w-4 h-4"></i>
      </button>
    </div>
  </div>
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>lucide.createIcons();</script>
</div>