Components

Tables

Compare structured records with aligned values, clear headers, and restrained row separators.

Usage & approach

Use a real table with a caption and scope="col" headers. Right-align amounts with tabular-nums. On small screens, preserve column relationships in an overflow-x-auto wrapper. Do not imply sorting unless it is implemented.

Specifications

Wrapper: overflow-x-auto rounded-lg border
Header: bg-[#f1f2f0] text-left text-xs font-semibold
Cells: px-4 py-4 text-sm
Amounts: text-right tabular-nums

Policy records

Fictional policy rows. A narrow preview scrolls horizontally instead of compressing the data.

<div class="overflow-x-auto rounded-lg border border-[#dfe7df] dark:border-[#3d4140]">
  <table class="w-full min-w-[560px] text-left text-sm">
    <caption class="bg-white px-4 py-4 text-left font-semibold dark:bg-[#262828]">Recent policies · sample data</caption>
    <thead class="bg-[#f1f2f0] text-xs text-[#333] dark:bg-[#303232] dark:text-[#c4c7c5]"><tr><th scope="col" class="px-4 py-3">Reference</th><th scope="col" class="px-4 py-3">Plan</th><th scope="col" class="px-4 py-3">Status</th><th scope="col" class="px-4 py-3 text-right">Premium</th></tr></thead>
    <tbody class="divide-y divide-[#dfe7df] bg-white dark:divide-[#3d4140] dark:bg-[#262828]">
      <tr><th scope="row" class="px-4 py-4 font-mono text-xs font-normal">OI-DEMO-0001</th><td class="px-4 py-4">Travel Essential</td><td class="px-4 py-4">Active</td><td class="px-4 py-4 text-right tabular-nums">₱1,250.00</td></tr>
      <tr><th scope="row" class="px-4 py-4 font-mono text-xs font-normal">OI-DEMO-0002</th><td class="px-4 py-4">Travel Plus</td><td class="px-4 py-4">Pending review</td><td class="px-4 py-4 text-right tabular-nums">₱2,400.00</td></tr>
    </tbody>
  </table>
</div>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.