Tailwind Examples
30 commonly used Tailwind CSS utility patterns for typography, buttons, cards, forms, and more.
//
Search across all documentation pages
30 commonly used Tailwind CSS utility patterns for typography, buttons, cards, forms, and more.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Primary heading for page titles and hero sections.
<h1 className="text-4xl font-bold text-gray-900">
Welcome to Our Platform
</h1>Notes: Use text-5xl or text-6xl for even larger hero headings. Combine with tracking-tight for tighter letter spacing on large text.
Secondary heading for section titles.
<h2 className="text-2xl font-semibold text-gray-700">
Getting Started
</h2>Notes: font-semibold (600 weight) is lighter than font-bold (700) and works well for secondary headings.
Standard paragraph text with proper line height.
<p className="text-base leading-relaxed text-gray-600">
This is a paragraph of body text with comfortable line spacing for readability.
</p>Notes: leading-relaxed (1.625 line height) improves readability. Use text-gray-600 or text-gray-700 for body text instead of pure black.
Fine print, captions, or metadata.
<span className="text-sm text-gray-500">
Published on January 15, 2024
</span>Notes: Use text-xs for even smaller text like timestamps or labels.
Main call-to-action button with hover and focus states.
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Get Started
</button>Notes: Always include focus states for accessibility. ring-offset-2 creates space between the ring and button edge.
Less prominent button for secondary actions.
<button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
Learn More
</button>Notes: Use border and subtle hover state instead of solid background color.
Destructive action button (delete, remove, etc.).
<button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
Delete Account
</button>Notes: Red indicates danger/destructive actions. Always confirm destructive actions in your logic.
Button in disabled state.
<button
disabled
className="cursor-not-allowed rounded-md bg-gray-300 px-4 py-2 text-sm font-medium text-gray-500"
>
Submit
</button>Notes: cursor-not-allowed shows the disabled cursor on hover. Use the disabled HTML attribute for accessibility.
Basic card with shadow and border.
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<h3 className="text-lg font-semibold">Card Title</h3>
<p className="mt-2 text-gray-600">Card content goes here.</p>
</div>Notes: shadow-sm provides subtle depth. Use shadow-md or shadow-lg for more prominent cards.
Interactive card that lifts on hover.
<div className="cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
<h3 className="text-lg font-semibold">Clickable Card</h3>
<p className="mt-2 text-gray-600">Hover to see the effect.</p>
</div>Notes: transition-shadow smoothly animates the shadow change. Add cursor-pointer to indicate interactivity.
Standard form text input.
<input
type="text"
placeholder="Enter your name"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>Notes: focus:ring-1 and focus:border-blue-500 provide clear visual feedback. w-full makes the input fill its container.
Form field with label above input.
<div className="space-y-1">
<label className="block text-sm font-medium text-gray-700">
Email Address
</label>
<input
type="email"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
</div>Notes: block makes the label take full width. space-y-1 adds consistent spacing between label and input.
Invalid input with error message.
<div className="space-y-1">
<input
type="email"
className="w-full rounded-md border border-red-500 px-3 py-2 text-sm focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500"
/>
<p className="text-sm text-red-600">Please enter a valid email address.</p>
</div>Notes: Red border and text indicate validation error. Always provide clear error messages.
Multi-line text input.
<textarea
rows={4}
placeholder="Enter your message"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
></textarea>Notes: Use rows attribute to control height. Same focus styles as text input for consistency.
Styled checkbox with label.
<label className="flex items-center space-x-2">
<input
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">I agree to the terms</span>
</label>Notes: flex items-center aligns checkbox and label. text-blue-600 colors the checked state.
Styled radio button with label.
<label className="flex items-center space-x-2">
<input
type="radio"
name="plan"
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">Basic Plan</span>
</label>Notes: Radio buttons should always have the same name attribute for grouping.
Small label for status or categories.
<span className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
New
</span>Notes: rounded-full creates pill shape. Use different color combinations for different badge types.
Informational message box.
<div className="rounded-md bg-blue-50 p-4">
<p className="text-sm text-blue-700">
Your account has been successfully verified.
</p>
</div>Notes: Light background with darker text from the same color family. Use border-l-4 border-blue-500 to add accent stripe.
Warning message box.
<div className="rounded-md bg-yellow-50 p-4">
<p className="text-sm text-yellow-800">
Your subscription will expire in 3 days.
</p>
</div>Notes: Yellow indicates warnings or important notices that need attention.
Error message box.
<div className="rounded-md bg-red-50 p-4">
<p className="text-sm text-red-700">
There was an error processing your payment.
</p>
</div>Notes: Red for errors and failures. Always provide actionable information in error messages.
Success confirmation message.
<div className="rounded-md bg-green-50 p-4">
<p className="text-sm text-green-700">
Your changes have been saved successfully.
</p>
</div>Notes: Green indicates successful operations or positive feedback.
Styled hyperlink with hover effect.
<a
href="/docs"
className="text-blue-600 underline decoration-1 underline-offset-2 hover:text-blue-800"
>
Read the documentation
</a>Notes: underline-offset-2 adds space between text and underline. decoration-1 makes the underline thinner.
Subtle link without underline.
<a
href="/about"
className="text-blue-600 hover:underline"
>
Learn more
</a>Notes: Underline appears only on hover. Common pattern in navigation and menus.
Horizontal rule separator.
<hr className="my-8 border-t border-gray-200" />Notes: my-8 adds vertical spacing. Use lighter border colors (gray-200 or gray-300) for subtle separation.
Circular user image.
<img
src="/avatar.jpg"
alt="User avatar"
className="h-10 w-10 rounded-full object-cover"
/>Notes: object-cover ensures image fills the circle without distortion. Use consistent sizes across your app.
Styled unordered list.
<ul className="list-disc space-y-2 pl-5 text-gray-700">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Notes: space-y-2 adds spacing between items. pl-5 indents the list.
Styled ordered list.
<ol className="list-decimal space-y-2 pl-5 text-gray-700">
<li>Install dependencies</li>
<li>Configure settings</li>
<li>Deploy application</li>
</ol>Notes: Same spacing pattern as bulleted lists for visual consistency.
Inline code snippet.
<p className="text-gray-700">
Run <code className="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-pink-600">npm install</code> to get started.
</p>Notes: font-mono uses monospace font. Light background distinguishes code from surrounding text.
Multi-line code snippet.
<pre className="overflow-x-auto rounded-lg bg-gray-900 p-4">
<code className="font-mono text-sm text-gray-100">
const greeting = "Hello, World!";{"\n"}
console.log(greeting);
</code>
</pre>Notes: overflow-x-auto enables horizontal scrolling for long lines. Dark background is common for code blocks.
Text shown on hover (CSS-only tooltip).
<div className="group relative inline-block">
<button className="text-blue-600 underline decoration-dotted">
Hover me
</button>
<span className="invisible absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
This is a tooltip
</span>
</div>Notes: Uses group and group-hover: for pure CSS tooltip. whitespace-nowrap prevents text wrapping. For complex tooltips, consider a library like Radix UI or Headless UI.
Reviewed by Chris St. John·Last updated Jul 16, 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥