Components
Cards
Group one coherent subject with a title, the essential details, and a clear action.
Usage & approach
Use cards for distinct objects rather than wrapping every paragraph in a border. Keep the heading descriptive and use a real link for navigation. Avoid nesting interactive elements inside a clickable card.
Specifications
- Surface
- rounded-lg border border-[#dfe7df] bg-white
- Padding
- p-6; space content with mt-3 and mt-6
- Title
- text-xl font-semibold tracking-tight
- Responsive
- grid gap-4 sm:grid-cols-2
Coverage card
A plan title, coverage list, and premium with a full-width action.
<article class="mx-auto max-w-md rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]">
<p class="text-xs font-semibold text-[#006838] dark:text-[#f4f5f2]">TRAVEL INSURANCE</p>
<h3 class="mt-3 text-xl font-semibold tracking-tight">Travel Essential</h3>
<p class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">A sample plan presentation for your next journey.</p>
<ul class="mt-5 list-inside list-disc space-y-2 text-sm"><li>Medical assistance</li><li>Trip interruption</li><li>Baggage protection</li></ul>
<p class="mt-6 text-3xl font-semibold tabular-nums">₱1,250<span class="text-sm font-normal"> / trip</span></p>
<button type="button" class="mt-6 w-full inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Select plan</button>
</article>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.