Ready-made Tailwind CSS components written only with utility classes: a store navbar, a hero section, a feature grid, a pricing card, a sign-in form and an empty state. Copy the HTML into any project that uses Tailwind, or open it in the editor, where Tailwind is loaded for you.
A clean store header built only with Tailwind utility classes: logo, centred links, a search field and a cart button with a count. The links hide below the md breakpoint and the layout is a single flex row with justify-between, so it needs no custom CSS at all.
A centred hero with a small announcement pill, a large headline with a gradient word, supporting copy and two buttons, written entirely in Tailwind classes. The gradient text uses bg-clip-text and text-transparent, and the headline scales from text-4xl to text-6xl at the sm breakpoint.
View code
<section class="max-w-2xl text-center px-4">
<a href="#" class="inline-flex items-center gap-2 rounded-full border border-white/15 px-3 py-1 text-xs font-semibold text-slate-300">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> New: same-day delivery
</a>
<h1 class="mt-5 text-4xl sm:text-6xl font-extrabold tracking-tight text-white">
Shop smarter with <span class="bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">less effort</span>
</h1>
<p class="mt-4 text-base sm:text-lg leading-relaxed text-slate-400">Everything you need to run an online store, without the busywork.</p>
<div class="mt-7 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-xl bg-blue-500 px-5 py-3 font-bold text-slate-950 hover:bg-blue-400">Start free</a>
<a href="#" class="rounded-xl border border-white/15 px-5 py-3 font-semibold text-white hover:bg-white/5">See how it works</a>
</div>
</section>
03. Tailwind Feature Grid
Tailwind
A three-column feature section with icon tiles, titles and short descriptions. It uses grid-cols-1 on phones, sm:grid-cols-2 on tablets and lg:grid-cols-3 on desktops, with gap utilities instead of margins. Swap the coloured tiles for your own SVG icons.
View code
<section class="w-full max-w-3xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 px-2">
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
<div class="h-10 w-10 rounded-xl bg-blue-100"></div>
<h3 class="mt-4 font-bold text-slate-900">Inventory sync</h3>
<p class="mt-1 text-sm leading-relaxed text-slate-600">Stock levels update across every channel within seconds.</p>
</div>
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
<div class="h-10 w-10 rounded-xl bg-violet-100"></div>
<h3 class="mt-4 font-bold text-slate-900">Smart discounts</h3>
<p class="mt-1 text-sm leading-relaxed text-slate-600">Set rules once and let promotions run themselves.</p>
</div>
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
<div class="h-10 w-10 rounded-xl bg-emerald-100"></div>
<h3 class="mt-4 font-bold text-slate-900">Daily reports</h3>
<p class="mt-1 text-sm leading-relaxed text-slate-600">Sales, refunds and top products in your inbox each morning.</p>
</div>
</section>
04. Tailwind Pricing Card
Tailwind
A highlighted pricing plan in Tailwind: plan name, a large price with the billing period, a check-marked feature list and a full-width button. The ring utility draws the highlighted border, and the check marks are small SVG icons sized with h-5 w-5.
A sign-in card with email and password fields, a remember-me checkbox, a forgot-password link and a submit button. Labels are visible, focus states use focus:ring, and inputs carry autocomplete attributes so password managers fill them correctly.
What to show when a list has nothing in it yet: a simple illustration made of utility-styled shapes, a short title, one line of guidance and a single clear action. Empty states are a chance to tell people what to do next instead of showing a blank table.
Every style here comes from Tailwind utility classes in the HTML, with no custom CSS. That makes each component self-contained: paste the markup into a page that loads Tailwind and it looks the same. The previews load Tailwind's Play CDN so you can see them working.
Responsive prefixes
Tailwind is mobile-first: unprefixed classes apply everywhere, and prefixes such as sm:, md: and lg: apply from that breakpoint up. The feature grid goes from one column to two to three with grid-cols-1 sm:grid-cols-2 lg:grid-cols-3, and the navbar hides its links below md.
Accessibility in utility classes
Utilities do not make a component accessible on their own. These demos add the parts that matter: visible labels or sr-only labels for inputs, focus:ring states, aria-current on the active link and autocomplete attributes on the sign-in form.
Using them in production
The Play CDN is for prototyping. In a real project, install Tailwind with your build tool so only the classes you use are shipped. The class names in these demos work in both Tailwind v3 and v4; if you are upgrading, the Tailwind v3 to v4 migration tool checks your markup.
Frequently asked questions
Which Tailwind version do these use?
The classes work in Tailwind v3 and v4. The previews use the Play CDN.
Can I convert a component to plain CSS?
Yes. Paste the classes into the Tailwind to CSS converter to get equivalent CSS for the core utilities.
Do I need JavaScript?
No. These components are pure HTML and Tailwind classes.