Security and compliance panel

Design a security and compliance section with Tailwind CSS. Open with a small "Trust" label, a heading and a supporting paragraph. Then a row of four certification tiles — SOC 2 Type II, ISO 27001, GDPR and HIPAA — each a bordered rounded-xl card with a shield glyph, the standard name in medium weight, a muted line giving the audit date or status, and a tiny green "Current" pill. Below the tiles, a two-column grid of six control rows, each with a check glyph, a bold control name and a muted sentence; cover encryption at rest and in transit, single sign-on, key rotation, penetration testing, data residency and backups. Close with a dark full-width strip inviting people to the trust centre, holding a short line of copy on the left and two buttons on the right — a white primary for the trust centre and a ghost outline for requesting the latest report.

<section class="mx-auto max-w-6xl px-6 py-20">
  <div class="max-w-2xl">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Trust</p>
    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">Built for the review your security team will run</h2>
    <p class="mt-3 leading-relaxed text-neutral-500">Independent audits, documented controls, and evidence you can hand straight to procurement.</p>
  </div>

  <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-xl border border-neutral-200 p-5">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Current</span>
      </div>
      <p class="mt-4 text-sm font-semibold text-neutral-900">SOC 2 Type II</p>
      <p class="mt-1 text-xs text-neutral-500">Audited through Nov 2025 by Prescott LLP</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Current</span>
      </div>
      <p class="mt-4 text-sm font-semibold text-neutral-900">ISO/IEC 27001</p>
      <p class="mt-1 text-xs text-neutral-500">Certificate 44-2211, valid to 2027</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Current</span>
      </div>
      <p class="mt-4 text-sm font-semibold text-neutral-900">GDPR</p>
      <p class="mt-1 text-xs text-neutral-500">DPA and SCCs available on request</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Current</span>
      </div>
      <p class="mt-4 text-sm font-semibold text-neutral-900">HIPAA</p>
      <p class="mt-1 text-xs text-neutral-500">BAA signed on Scale and Enterprise</p>
    </div>
  </div>

  <div class="mt-6 grid gap-x-10 gap-y-5 rounded-2xl border border-neutral-200 bg-neutral-50 p-8 sm:grid-cols-2">
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">Encryption everywhere.</span> AES-256 at rest, TLS 1.3 in transit, no exceptions for internal traffic.</p>
    </div>
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">SSO and SCIM.</span> SAML with enforced provisioning and automatic deprovisioning on offboarding.</p>
    </div>
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">Key rotation.</span> Customer-managed keys with a 90-day rotation schedule you control.</p>
    </div>
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">Penetration testing.</span> Twice yearly by an external firm; summaries published in the trust centre.</p>
    </div>
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">Data residency.</span> Pin your workspace to the EU, US or AU region at creation time.</p>
    </div>
    <div class="flex gap-3">
      <span class="mt-0.5 text-green-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">Backups and recovery.</span> Point-in-time restore to any minute in the last 35 days, tested quarterly.</p>
    </div>
  </div>

  <div class="mt-6 flex flex-col items-start gap-5 rounded-2xl bg-neutral-900 px-8 py-7 text-white sm:flex-row sm:items-center sm:justify-between">
    <p class="max-w-md text-sm leading-relaxed text-neutral-300">Everything above is documented, dated and downloadable — most teams clear review in a single call.</p>
    <div class="flex shrink-0 gap-3">
      <a href="#" class="rounded-xl bg-white px-4 py-2.5 text-sm font-medium text-neutral-900 transition hover:bg-neutral-100">Open trust centre</a>
      <a href="#" class="rounded-xl border border-neutral-700 px-4 py-2.5 text-sm font-medium text-neutral-200 transition hover:bg-neutral-800">Request SOC 2 report</a>
    </div>
  </div>
</section>