Invoice Base

<section class="ws-invoice mx-auto max-w-4xl rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-8 shadow-sm">
  <!-- Header -->
  <div class="flex flex-wrap items-start justify-between gap-6">
    <div>
      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-color-surface-inverse)] text-sm font-bold text-white">W</div>
      <p class="mt-3 text-sm text-slate-500">123 Business Street<br>Suite 100, City 12345</p>
    </div>
    <div class="text-right">
      <h1 class="text-2xl font-bold text-slate-900">Invoice</h1>
      <p class="mt-1 text-sm text-slate-500">#INV-2026-0042</p>
      <span class="mt-2 inline-block rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700">Pending</span>
    </div>
  </div>

  <!-- Billing info -->
  <div class="mt-8 grid gap-8 sm:grid-cols-3">
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Billed From</h3>
      <p class="mt-2 text-sm font-medium text-slate-900">Webspire GmbH</p>
      <p class="text-sm text-slate-500">billing@webspire.de</p>
    </div>
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Billed To</h3>
      <p class="mt-2 text-sm font-medium text-slate-900">Acme Corp</p>
      <p class="text-sm text-slate-500">finance@acme.com</p>
    </div>
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Details</h3>
      <dl class="mt-2 space-y-1 text-sm">
        <div class="flex justify-between"><dt class="text-slate-500">Issue Date</dt><dd class="font-medium text-slate-900">Mar 15, 2026</dd></div>
        <div class="flex justify-between"><dt class="text-slate-500">Due Date</dt><dd class="font-medium text-slate-900">Apr 15, 2026</dd></div>
      </dl>
    </div>
  </div>

  <!-- Line items -->
  <div class="mt-8 overflow-x-auto">
    <table class="w-full text-left text-sm">
      <thead>
        <tr class="border-b border-slate-200">
          <th class="pb-3 font-semibold text-slate-500">Description</th>
          <th class="pb-3 text-center font-semibold text-slate-500">Qty</th>
          <th class="pb-3 text-right font-semibold text-slate-500">Rate</th>
          <th class="pb-3 text-right font-semibold text-slate-500">Amount</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        <tr>
          <td class="py-3 text-slate-900">UI Pattern Library License</td>
          <td class="py-3 text-center text-slate-600">1</td>
          <td class="py-3 text-right text-slate-600">€2,400.00</td>
          <td class="py-3 text-right font-medium text-slate-900">€2,400.00</td>
        </tr>
        <tr>
          <td class="py-3 text-slate-900">Custom Component Development</td>
          <td class="py-3 text-center text-slate-600">16</td>
          <td class="py-3 text-right text-slate-600">€120.00</td>
          <td class="py-3 text-right font-medium text-slate-900">€1,920.00</td>
        </tr>
        <tr>
          <td class="py-3 text-slate-900">Design System Consultation</td>
          <td class="py-3 text-center text-slate-600">8</td>
          <td class="py-3 text-right text-slate-600">€150.00</td>
          <td class="py-3 text-right font-medium text-slate-900">€1,200.00</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Totals -->
  <div class="mt-6 flex justify-end">
    <dl class="w-64 space-y-2 text-sm">
      <div class="flex justify-between"><dt class="text-slate-500">Subtotal</dt><dd class="font-medium text-slate-900">€5,520.00</dd></div>
      <div class="flex justify-between"><dt class="text-slate-500">VAT (19%)</dt><dd class="font-medium text-slate-900">€1,048.80</dd></div>
      <div class="flex justify-between border-t border-slate-200 pt-2"><dt class="text-base font-semibold text-slate-900">Total</dt><dd class="text-base font-bold text-slate-900">€6,568.80</dd></div>
    </dl>
  </div>

  <!-- Notes & Actions -->
  <div class="mt-8 flex flex-wrap items-end justify-between gap-4 border-t border-slate-200 pt-6">
    <p class="max-w-sm text-xs text-slate-400">Payment due within 30 days. Please include the invoice number in your bank transfer reference.</p>
    <div class="flex gap-2">
      <button class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700">Download PDF</button>
      <button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800">Send Invoice</button> <!-- ws-ok: CTA button -->
    </div>
  </div>
</section>