Tables

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-4xl px-6 py-16'><h2 class='text-2xl font-semibold text-black'>Orders</h2><div class='mt-6 hidden grid-cols-4 gap-4 px-5 pb-2 text-xs font-medium uppercase tracking-wide text-neutral-500 sm:grid'><span>Order</span><span>Date</span><span>Total</span><span>Status</span></div><ul class='space-y-3'><li class='grid gap-2 rounded-2xl border border-neutral-200 bg-white p-5 sm:grid-cols-4 sm:items-center sm:gap-4'><span class='font-mono text-sm font-medium text-black'>#1042</span><span class='text-sm text-neutral-600'>12 Nov 2026</span><span class='text-sm text-neutral-600'>$58.00</span><span><span class='rounded-full bg-black px-2.5 py-0.5 text-xs font-medium text-white'>Shipped</span></span></li><li class='grid gap-2 rounded-2xl border border-neutral-200 bg-white p-5 sm:grid-cols-4 sm:items-center sm:gap-4'><span class='font-mono text-sm font-medium text-black'>#1041</span><span class='text-sm text-neutral-600'>10 Nov 2026</span><span class='text-sm text-neutral-600'>$24.00</span><span><span class='rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-600'>Packing</span></span></li></ul></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-16'><h2 class='text-2xl font-semibold text-black'>Project details</h2><dl class='mt-6 divide-y divide-neutral-200 border-y border-neutral-200 text-sm'><div class='grid grid-cols-3 gap-4 py-4'><dt class='text-neutral-500'>Name</dt><dd class='col-span-2 text-black'>Public site</dd></div><div class='grid grid-cols-3 gap-4 py-4'><dt class='text-neutral-500'>Pages</dt><dd class='col-span-2 text-black'>12</dd></div><div class='grid grid-cols-3 gap-4 py-4'><dt class='text-neutral-500'>Tailwind</dt><dd class='col-span-2 text-black'>v4</dd></div><div class='grid grid-cols-3 gap-4 py-4'><dt class='text-neutral-500'>Owner</dt><dd class='col-span-2 text-black'>Alex Morgan</dd></div><div class='grid grid-cols-3 gap-4 py-4'><dt class='text-neutral-500'>Last updated</dt><dd class='col-span-2 text-black'>12 Nov 2026</dd></div></dl></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-4xl px-6 py-16'><div class='overflow-hidden rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='border-b border-neutral-200 bg-neutral-50 text-neutral-500'><tr><th class='px-6 py-3 font-medium'>Name</th><th class='px-6 py-3 font-medium'>Category</th><th class='px-6 py-3 font-medium'>Version</th></tr></thead><tbody class='divide-y divide-neutral-200 text-neutral-700'><tr><td class='px-6 py-3.5 text-black'>Hero 01</td><td class='px-6 py-3.5'>Hero</td><td class='px-6 py-3.5'>v2</td></tr><tr><td class='px-6 py-3.5 text-black'>Navbar 03</td><td class='px-6 py-3.5'>Navbar</td><td class='px-6 py-3.5'>v2</td></tr><tr><td class='px-6 py-3.5 text-black'>Pricing 06</td><td class='px-6 py-3.5'>Pricing</td><td class='px-6 py-3.5'>v1</td></tr></tbody></table><div class='flex items-center justify-between border-t border-neutral-200 bg-neutral-50 px-6 py-3 text-sm'><p class='text-neutral-500'>Showing 1 to 3 of 80</p><div class='flex gap-2'><button type='button' class='rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-neutral-400'>Previous</button><button type='button' class='rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-black hover:bg-neutral-100'>Next</button></div></div></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-16'><h2 class='text-2xl font-semibold text-black'>Invoices</h2><div class='mt-6 overflow-x-auto rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='border-b border-neutral-200 bg-neutral-50 text-neutral-500'><tr><th class='px-6 py-3 font-medium'>Invoice</th><th class='px-6 py-3 font-medium'>Date</th><th class='px-6 py-3 font-medium'>Amount</th><th class='px-6 py-3 font-medium'>Status</th></tr></thead><tbody class='divide-y divide-neutral-200'><tr><td class='px-6 py-4 font-mono text-black'>INV-0042</td><td class='px-6 py-4 text-neutral-600'>1 Nov 2026</td><td class='px-6 py-4 text-neutral-600'>$29.00</td><td class='px-6 py-4'><span class='rounded-full bg-black px-2.5 py-0.5 text-xs font-medium text-white'>Paid</span></td></tr><tr><td class='px-6 py-4 font-mono text-black'>INV-0041</td><td class='px-6 py-4 text-neutral-600'>1 Oct 2026</td><td class='px-6 py-4 text-neutral-600'>$29.00</td><td class='px-6 py-4'><span class='rounded-full bg-black px-2.5 py-0.5 text-xs font-medium text-white'>Paid</span></td></tr><tr><td class='px-6 py-4 font-mono text-black'>INV-0043</td><td class='px-6 py-4 text-neutral-600'>1 Dec 2026</td><td class='px-6 py-4 text-neutral-600'>$29.00</td><td class='px-6 py-4'><span class='rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-600'>Pending</span></td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-4xl px-6 py-16'><div class='overflow-x-auto rounded-xl border border-neutral-200'><table class='w-full text-left text-xs'><thead class='border-b border-neutral-200 bg-neutral-50 uppercase tracking-wide text-neutral-500'><tr><th class='px-4 py-2 font-medium'>Class</th><th class='px-4 py-2 font-medium'>CSS</th><th class='px-4 py-2 text-right font-medium'>px</th></tr></thead><tbody class='divide-y divide-neutral-100 text-neutral-700'><tr><td class='px-4 py-2 font-mono'>rounded-md</td><td class='px-4 py-2 font-mono'>border-radius</td><td class='px-4 py-2 text-right font-mono'>6</td></tr><tr><td class='px-4 py-2 font-mono'>rounded-xl</td><td class='px-4 py-2 font-mono'>border-radius</td><td class='px-4 py-2 text-right font-mono'>12</td></tr><tr><td class='px-4 py-2 font-mono'>rounded-3xl</td><td class='px-4 py-2 font-mono'>border-radius</td><td class='px-4 py-2 text-right font-mono'>24</td></tr><tr><td class='px-4 py-2 font-mono'>p-4</td><td class='px-4 py-2 font-mono'>padding</td><td class='px-4 py-2 text-right font-mono'>16</td></tr><tr><td class='px-4 py-2 font-mono'>p-8</td><td class='px-4 py-2 font-mono'>padding</td><td class='px-4 py-2 text-right font-mono'>32</td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-16'><div class='flex items-center justify-between rounded-t-2xl bg-black px-6 py-3 text-sm text-white'><span>2 selected</span><div class='flex gap-4'><button type='button' class='text-neutral-300 hover:text-white'>Duplicate</button><button type='button' class='text-neutral-300 hover:text-white'>Delete</button></div></div><div class='overflow-x-auto rounded-b-2xl border border-t-0 border-neutral-200'><table class='w-full text-left text-sm'><tbody class='divide-y divide-neutral-200'><tr class='bg-neutral-50'><td class='w-12 px-6 py-4'><input type='checkbox' checked class='h-4 w-4 accent-black'></td><td class='py-4 font-medium text-black'>Home</td><td class='px-6 py-4 text-neutral-600'>Published</td></tr><tr class='bg-neutral-50'><td class='w-12 px-6 py-4'><input type='checkbox' checked class='h-4 w-4 accent-black'></td><td class='py-4 font-medium text-black'>Pricing</td><td class='px-6 py-4 text-neutral-600'>Draft</td></tr><tr><td class='w-12 px-6 py-4'><input type='checkbox' class='h-4 w-4 accent-black'></td><td class='py-4 font-medium text-black'>Blog</td><td class='px-6 py-4 text-neutral-600'>Published</td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto max-w-4xl px-6 py-16'><h2 class='text-2xl font-semibold text-white'>Recent activity</h2><div class='mt-6 overflow-x-auto rounded-2xl border border-neutral-800'><table class='w-full text-left text-sm'><thead class='border-b border-neutral-800 text-neutral-500'><tr><th class='px-6 py-3 font-medium'>Event</th><th class='px-6 py-3 font-medium'>By</th><th class='px-6 py-3 font-medium'>When</th></tr></thead><tbody class='divide-y divide-neutral-800 text-neutral-300'><tr><td class='px-6 py-4 text-white'>Page published</td><td class='px-6 py-4'>Alex Morgan</td><td class='px-6 py-4'>2 min ago</td></tr><tr><td class='px-6 py-4 text-white'>Animation added</td><td class='px-6 py-4'>Sam Rivera</td><td class='px-6 py-4'>1 hour ago</td></tr><tr><td class='px-6 py-4 text-white'>Project shared</td><td class='px-6 py-4'>Jordan Lee</td><td class='px-6 py-4'>Yesterday</td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-16'><div class='flex items-center justify-between'><h2 class='text-2xl font-semibold text-black'>Team</h2><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Invite</button></div><div class='mt-6 overflow-x-auto rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='border-b border-neutral-200 bg-neutral-50 text-neutral-500'><tr><th class='px-6 py-3 font-medium'>Person</th><th class='px-6 py-3 font-medium'>Role</th><th class='px-6 py-3 font-medium'>Email</th><th class='px-6 py-3'></th></tr></thead><tbody class='divide-y divide-neutral-200'><tr><td class='px-6 py-4'><div class='flex items-center gap-3'><span class='grid h-9 w-9 place-items-center rounded-full bg-black text-xs font-semibold text-white'>AM</span><span class='font-medium text-black'>Alex Morgan</span></div></td><td class='px-6 py-4 text-neutral-600'>Owner</td><td class='px-6 py-4 text-neutral-600'>alex@example.com</td><td class='px-6 py-4 text-right'><a href='#' class='text-black underline'>Edit</a></td></tr><tr><td class='px-6 py-4'><div class='flex items-center gap-3'><span class='grid h-9 w-9 place-items-center rounded-full bg-neutral-800 text-xs font-semibold text-white'>SR</span><span class='font-medium text-black'>Sam Rivera</span></div></td><td class='px-6 py-4 text-neutral-600'>Designer</td><td class='px-6 py-4 text-neutral-600'>sam@example.com</td><td class='px-6 py-4 text-right'><a href='#' class='text-black underline'>Edit</a></td></tr><tr><td class='px-6 py-4'><div class='flex items-center gap-3'><span class='grid h-9 w-9 place-items-center rounded-full bg-neutral-600 text-xs font-semibold text-white'>JL</span><span class='font-medium text-black'>Jordan Lee</span></div></td><td class='px-6 py-4 text-neutral-600'>Developer</td><td class='px-6 py-4 text-neutral-600'>jordan@example.com</td><td class='px-6 py-4 text-right'><a href='#' class='text-black underline'>Edit</a></td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-4xl px-6 py-16'><div class='overflow-x-auto rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='bg-black text-white'><tr><th class='px-6 py-3 font-medium'>Project</th><th class='px-6 py-3 text-right font-medium'>Pages</th><th class='px-6 py-3 text-right font-medium'>Views</th></tr></thead><tbody class='text-neutral-700'><tr><td class='px-6 py-3'>Public site</td><td class='px-6 py-3 text-right'>12</td><td class='px-6 py-3 text-right'>4,210</td></tr><tr class='bg-neutral-50'><td class='px-6 py-3'>Docs</td><td class='px-6 py-3 text-right'>34</td><td class='px-6 py-3 text-right'>9,880</td></tr><tr><td class='px-6 py-3'>Blog</td><td class='px-6 py-3 text-right'>21</td><td class='px-6 py-3 text-right'>3,102</td></tr><tr class='bg-neutral-50'><td class='px-6 py-3'>Landing pages</td><td class='px-6 py-3 text-right'>8</td><td class='px-6 py-3 text-right'>1,450</td></tr></tbody></table></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-16'><h2 class='text-2xl font-semibold text-black'>Pages</h2><div class='mt-6 overflow-x-auto rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='border-b border-neutral-200 bg-neutral-50 text-neutral-500'><tr><th class='px-6 py-3 font-medium'>Name</th><th class='px-6 py-3 font-medium'>Owner</th><th class='px-6 py-3 font-medium'>Status</th><th class='px-6 py-3 font-medium'>Updated</th></tr></thead><tbody class='divide-y divide-neutral-200'><tr><td class='px-6 py-4 font-medium text-black'>Home</td><td class='px-6 py-4 text-neutral-600'>Alex Morgan</td><td class='px-6 py-4 text-neutral-600'>Published</td><td class='px-6 py-4 text-neutral-600'>12 Nov</td></tr><tr><td class='px-6 py-4 font-medium text-black'>Pricing</td><td class='px-6 py-4 text-neutral-600'>Sam Rivera</td><td class='px-6 py-4 text-neutral-600'>Draft</td><td class='px-6 py-4 text-neutral-600'>10 Nov</td></tr><tr><td class='px-6 py-4 font-medium text-black'>Blog</td><td class='px-6 py-4 text-neutral-600'>Jordan Lee</td><td class='px-6 py-4 text-neutral-600'>Published</td><td class='px-6 py-4 text-neutral-600'>2 Nov</td></tr></tbody></table></div></div></section>