Settings
Main content area that grows to fill the remaining space.
Ready-to-use patterns built entirely with The New CSS utility classes. Each example includes the source HTML and a live rendered preview so you can see the result right away. Copy the code, paste it into your project, and customize to fit your needs. For full details on individual utilities, visit the documentation.
Cards are one of the most common UI patterns. This example uses padding, rounded corners, and shadow utilities to create a clean content block suitable for blog posts, product listings, or feature highlights.
A simple card with padding, rounded corners, and a subtle shadow. Great for displaying content blocks.
Read more<div class="bg-gray-100 p-6 rounded-lg shadow">
<h3 class="font-bold text-lg mb-2">Card Title</h3>
<p class="text-gray-600 text-sm mb-4">
A simple card with padding, rounded corners, and a
subtle shadow. Great for displaying content blocks.
</p>
<a href="#" class="text-blue-600 text-sm font-semibold
hover:underline">Read more</a>
</div>A sticky header that stays at the top of the viewport as the user scrolls. Built with flexbox utilities for alignment and layout utilities for sticky positioning. The logo sits on the left while navigation links and a call-to-action button align to the right.
<header class="sticky top-0 bg-gray-50 shadow-sm">
<nav class="container mx-auto px-4 py-3 flex
items-center justify-between">
<a href="/" class="font-bold text-lg">Brand</a>
<div class="flex items-center gap-6">
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Home</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Features</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Pricing</a>
<a href="#" class="bg-blue-600 text-white text-sm
px-4 py-2 rounded-lg font-semibold">Sign Up</a>
</div>
</nav>
</header>A centered hero section with a bold headline, descriptive subtext, and two call-to-action buttons. This pattern uses typography utilities for size and weight, spacing for vertical rhythm, and color utilities for the primary button. The layout centers automatically with text-center and mx-auto.
Start your next project with a lightweight utility-first CSS library. No build step required.
<section class="py-16 text-center">
<h1 class="text-4xl font-extrabold tracking-tight
mb-4">Build Something Great</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto
mb-8">Start your next project with a lightweight
utility-first CSS library. No build step required.</p>
<div class="flex gap-4 justify-center">
<a href="#" class="bg-blue-600 text-white px-6 py-3
rounded-lg font-semibold">Get Started</a>
<a href="#" class="border border-gray-300 px-6 py-3
rounded-lg font-semibold">Learn More</a>
</div>
</section>A three-column pricing layout using the grid system with responsive breakpoints. The featured plan stands out with a thicker colored border. Each card uses consistent spacing and border utilities to maintain visual hierarchy.
$0
For personal projects and experiments.
Get Started$19
For growing teams and startups.
Upgrade$99
For large organizations with custom needs.
Contact Us<div class="grid sm:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-lg p-6
text-center">
<h3 class="font-bold text-lg mb-2">Free</h3>
<p class="text-3xl font-extrabold mb-4">$0</p>
<p class="text-gray-600 text-sm mb-6">For personal
projects and experiments.</p>
<a href="#" class="block bg-gray-200 text-gray-800
py-2 rounded-lg font-semibold text-sm">Get Started</a>
</div>
<div class="border-2 border-blue-600 rounded-lg p-6
text-center">
<h3 class="font-bold text-lg mb-2">Pro</h3>
<p class="text-3xl font-extrabold mb-4">$19</p>
<p class="text-gray-600 text-sm mb-6">For growing
teams and startups.</p>
<a href="#" class="block bg-blue-600 text-white py-2
rounded-lg font-semibold text-sm">Upgrade</a>
</div>
<div class="border border-gray-200 rounded-lg p-6
text-center">
<h3 class="font-bold text-lg mb-2">Enterprise</h3>
<p class="text-3xl font-extrabold mb-4">$99</p>
<p class="text-gray-600 text-sm mb-6">For large
organizations with custom needs.</p>
<a href="#" class="block bg-gray-200 text-gray-800
py-2 rounded-lg font-semibold text-sm">Contact Us</a>
</div>
</div>A gallery that adapts from a single column on mobile to two columns at the sm breakpoint and three columns at the lg breakpoint. This is one of the most useful grid patterns for image galleries, product listings, and portfolio pages. Resize your browser to see the layout change.
<div class="grid grid-cols-1 sm:grid-cols-2
lg:grid-cols-3 gap-4">
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 1</div>
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 2</div>
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 3</div>
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 4</div>
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 5</div>
<div class="bg-gray-100 rounded-lg p-6 text-center
text-gray-600">Item 6</div>
</div>A common application layout with a fixed-width sidebar and a flexible main content area. Uses flexbox with shrink-0 on the sidebar so it maintains its width, while flex-1 on the main area lets it fill the remaining space. This pattern works well for dashboards, admin panels, and documentation sites.
Main content area that grows to fill the remaining space.
<div class="flex gap-6" style="min-height: 300px">
<aside class="shrink-0 bg-gray-100 rounded-lg p-4"
style="width: 200px">
<h3 class="font-bold text-sm mb-3">Menu</h3>
<nav class="flex flex-col gap-2">
<a href="#" class="text-sm text-gray-600
hover:text-gray-900">Dashboard</a>
<a href="#" class="text-sm text-blue-600
font-semibold">Settings</a>
<a href="#" class="text-sm text-gray-600
hover:text-gray-900">Profile</a>
</nav>
</aside>
<main class="flex-1 bg-gray-50 rounded-lg p-6">
<h2 class="font-bold text-lg mb-2">Settings</h2>
<p class="text-gray-600 text-sm">Main content area
that grows to fill the remaining space.</p>
</main>
</div>A clean contact form with labeled inputs, a textarea, and a submit button. Uses sizing utilities like w-full for full-width inputs, border and rounded-lg for styled inputs, and spacing utilities for consistent vertical rhythm between fields.
<form class="max-w-sm">
<div class="mb-4">
<label class="block text-sm font-semibold mb-1">
Name</label>
<input type="text" placeholder="Jane Doe"
class="w-full border border-gray-300 rounded-lg
px-3 py-2 text-sm">
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-1">
Email</label>
<input type="email" placeholder="[email protected]"
class="w-full border border-gray-300 rounded-lg
px-3 py-2 text-sm">
</div>
<div class="mb-6">
<label class="block text-sm font-semibold mb-1">
Message</label>
<textarea rows="3" placeholder="Your message..."
class="w-full border border-gray-300 rounded-lg
px-3 py-2 text-sm"></textarea>
</div>
<button type="submit" class="w-full bg-blue-600
text-white py-2 rounded-lg font-semibold text-sm">
Send Message</button>
</form>A multi-column footer using flexbox with flex-col on small screens and flex-row at the sm breakpoint. Each column contains a heading and a list of links arranged vertically with flex-col and gap utilities. The justify-between class distributes columns evenly across the full width.
<footer class="bg-gray-100 py-8">
<div class="container mx-auto px-4 flex flex-col
sm:flex-row gap-8 justify-between">
<div>
<h3 class="font-bold mb-2">Brand</h3>
<p class="text-gray-600 text-sm">Building tools
for the modern web.</p>
</div>
<div>
<h4 class="font-semibold text-sm mb-2">Product</h4>
<nav class="flex flex-col gap-1">
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Features</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Pricing</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Changelog</a>
</nav>
</div>
<div>
<h4 class="font-semibold text-sm mb-2">Company</h4>
<nav class="flex flex-col gap-1">
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">About</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Blog</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Contact</a>
</nav>
</div>
<div>
<h4 class="font-semibold text-sm mb-2">Legal</h4>
<nav class="flex flex-col gap-1">
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Privacy</a>
<a href="#" class="text-gray-600 text-sm
hover:text-gray-900">Terms</a>
</nav>
</div>
</div>
</footer>These examples only scratch the surface. Combine utilities to build any layout you need. Explore the documentation to learn about every available class: