Webhook Inspector

<div
        class="w-full max-w-4xl mx-auto border border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs">
        <div class="flex items-center gap-4 px-4 py-3 bg-zinc-900 border-b border-zinc-800">
            <span
                class="px-2 py-1 bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 rounded font-bold">POST</span>
            <span class="text-zinc-400">/v1/webhooks/billing.success</span>
            <span class="ml-auto text-zinc-500">200 OK • 142ms</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-zinc-800">
            <div class="p-4 bg-zinc-900/50">
                <div class="text-zinc-500 mb-2 uppercase text-[10px] font-bold tracking-widest">Request Payload</div>
                <pre class="text-indigo-300">
{
  "id": "evt_9a4k2L0p",
  "type": "invoice.paid",
  "data": {
    "amount": 4900,
    "currency": "usd",
    "customer": "cus_N9f29a",
    "status": "active"
  }
}</pre>
            </div>
            <div class="p-4">
                <div class="text-zinc-500 mb-2 uppercase text-[10px] font-bold tracking-widest">Server Response</div>
                <pre class="text-emerald-400">
{
  "received": true,
  "status": "processed",
  "timestamp": 1708429102,
  "queue_id": "q_2198302"
}</pre>
            </div>
        </div>
    </div>