Foundations
Spacing & layout
Build from a four-pixel rhythm, start with the smallest screen, and add columns only when the content has enough room.
Usage & approach
Tailwind defaults: sm 640px, md 768px, lg 1024px, xl 1280px, and 2xl 1536px. Unprefixed classes apply everywhere. sm: and lg: add minimum-width overrides. Device previews use real iframe widths; a 375px preview should keep a single column.
Specifications
- Spacing
- gap-2 = 8px; gap-4 = 16px; gap-6 = 24px; gap-8 = 32px.
- Page gutter
- px-4 sm:px-6 lg:px-8
- Content width
- mx-auto w-full max-w-7xl
- Surfaces
- rounded-md for controls; rounded-lg for grouped content.
Responsive coverage grid
One column on mobile, two from 640px, and three from 1024px. Switch the preview width to compare.
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<article class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><h3 class="font-semibold">Travel</h3><p class="mt-2 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Protection for the next journey.</p></article>
<article class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><h3 class="font-semibold">Personal accident</h3><p class="mt-2 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Support for everyday uncertainty.</p></article>
<article class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><h3 class="font-semibold">Motor</h3><p class="mt-2 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">A clear view of vehicle coverage.</p></article>
</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.