Department directory table

Design a contact directory with Tailwind CSS. Start with a heading, a muted line saying every address reaches a person rather than a queue, and a search field. Then a bordered rounded-2xl table with rows for eight departments: columns for department with a glyph and a one-line description, the best contact route shown as an email or a link with a small type label, the typical response time, and hours. Zebra-stripe alternate rows faintly, and give one row an amber "Urgent only" pill in the response column. Under the table, a three-card row for the things that are not email — a phone number for urgent production issues, a postal address for legal notices, and a security disclosure address with a PGP fingerprint in monospace. Finish with a muted line about response times during holidays.

<section class="mx-auto max-w-4xl px-6 py-14">
  <h1 class="text-3xl font-semibold tracking-tight text-neutral-900">Who to write to</h1>
  <p class="mt-2 text-neutral-500">Every address below reaches a person on that team, not a shared queue with a ticket robot.</p>

  <div class="relative mt-6 max-w-sm">
    <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"><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"><circle cx="11" cy="11" r="7"/><path d="m16 16 4 4"/></svg></span>
    <input type="search" placeholder="Search departments…"
      class="w-full rounded-xl border border-neutral-200 py-2.5 pl-10 pr-3 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
  </div>

  <div class="mt-6 overflow-x-auto rounded-2xl border border-neutral-200 bg-white">
    <table class="w-full min-w-[640px] text-sm">
      <thead>
        <tr class="border-b border-neutral-200 bg-neutral-50 text-left text-[11px] uppercase tracking-widest text-neutral-400">
          <th class="px-6 py-3 font-medium">Department</th>
          <th class="px-6 py-3 font-medium">Route</th>
          <th class="px-6 py-3 font-medium">Response</th>
          <th class="px-6 py-3 font-medium">Hours</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-neutral-100">
        <tr>
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> Support</p><p class="mt-0.5 text-xs text-neutral-500">Anything not working as documented</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">41 minutes median</td>
          <td class="px-6 py-4 text-neutral-500">07:00–20:00 UTC</td>
        </tr>
        <tr class="bg-neutral-50/60">
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg> Sales</p><p class="mt-0.5 text-xs text-neutral-500">Pricing, contracts and procurement</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">1 business day</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
        <tr>
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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"><rect x="3" y="5" width="18" height="4" rx="1"/><path d="M5 9v10h14V9M10 13h4"/></svg> Billing</p><p class="mt-0.5 text-xs text-neutral-500">Invoices, VAT and payment methods</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">1 business day</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
        <tr class="bg-neutral-50/60">
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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> Security</p><p class="mt-0.5 text-xs text-neutral-500">Vulnerability reports and disclosures</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">Within 24h</span></td>
          <td class="px-6 py-4 text-neutral-500">Always monitored</td>
        </tr>
        <tr>
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg> Legal</p><p class="mt-0.5 text-xs text-neutral-500">DPAs, notices and subpoenas</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">3 business days</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
        <tr class="bg-neutral-50/60">
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> Careers</p><p class="mt-0.5 text-xs text-neutral-500">Applications and speculative notes</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">5 business days</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
        <tr>
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg> Press</p><p class="mt-0.5 text-xs text-neutral-500">Interviews, quotes and assets</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">2 business days</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
        <tr class="bg-neutral-50/60">
          <td class="px-6 py-4"><p class="flex items-center gap-2 font-medium text-neutral-900"><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"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.3 2.47 3.45 5.47 3.45 9S14.3 18.53 12 21c-2.3-2.47-3.45-5.47-3.45-9S9.7 5.47 12 3Z"/></svg> Partnerships</p><p class="mt-0.5 text-xs text-neutral-500">Integrations and resellers</p></td>
          <td class="px-6 py-4"><a href="#" class="text-neutral-900 underline underline-offset-4">[email protected]</a></td>
          <td class="px-6 py-4 text-neutral-600">3 business days</td>
          <td class="px-6 py-4 text-neutral-500">Weekdays</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mt-6 grid gap-4 sm:grid-cols-3">
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 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="M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-1.5 2a14 14 0 0 1-7.5-7.5L9 8 7 3Z"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">Production down</p>
      <p class="mt-1 text-sm text-neutral-500">+31 10 421 8899, 24/7, for Scale and Enterprise customers.</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 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="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">Legal notices</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Havenstraat 12, 3024 CE Rotterdam, The Netherlands.</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 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>
      <p class="mt-3 text-sm font-medium text-neutral-900">Encrypted reports</p>
      <p class="mt-1 break-all font-mono text-[11px] leading-relaxed text-neutral-500">4F21 C94A 77B3 410D BE62 A015 CC4F 9D02</p>
    </div>
  </div>

  <p class="mt-6 text-xs text-neutral-400">
    Response times stretch around public holidays in the Netherlands and Portugal. Security and production-down routes are unaffected.
  </p>
</section>