Building a landing page section by section
A landing page is a one-page site that presents a product and leads to one action, such as a purchase. Let us build a landing page for a headphones shop section by section. Each section is a separate <section> or <header> block with the same inner wrapper.
The section wrapper
In every section the content is limited in width and centered with the same pair of classes: mx-auto max-w-5xl px-4. The section background stretches across the full width, while the text stays in a neat column.
Header
The logo on the left, the menu on the right. On a phone the menu is hidden with hidden and appears from sm::
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<header class="border-b border-gray-200 bg-white">
<div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
<a href="#" class="text-lg font-bold text-indigo-600">SoundShop</a>
<nav class="hidden gap-6 text-sm text-gray-600 sm:flex">
<a href="#" class="hover:text-gray-900">Catalog</a>
<a href="#" class="hover:text-gray-900">Delivery</a>
<a href="#" class="hover:text-gray-900">Contact</a>
</nav>
</div>
</header>Hero
A large heading, short text and two buttons. On a wide screen an image appears on the right:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<section class="bg-linear-to-br from-indigo-50 to-white">
<div class="mx-auto grid max-w-5xl items-center gap-8 px-4 py-12 md:grid-cols-2">
<div>
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900">Sound that travels with you</h1>
<p class="mt-4 text-lg text-gray-600">Headphones and speakers delivered in one day.</p>
<div class="mt-6 flex flex-wrap gap-3">
<a href="#" class="rounded-lg bg-indigo-600 px-5 py-3 font-medium text-white hover:bg-indigo-500">Browse the catalog</a>
<a href="#" class="rounded-lg border border-gray-300 px-5 py-3 font-medium text-gray-700 hover:bg-gray-50">See discounts</a>
</div>
</div>
<img src="/media/photo-800x500.jpg" alt="Headphones" class="hidden rounded-2xl shadow-xl md:block">
</div>
</section>The gradient livens up the background without competing with the text. The buttons wrap onto a new line when they do not fit.
Products
A grid of cards — the same card from earlier chapters, now in a responsive grid:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<section class="mx-auto max-w-5xl px-4 py-12">
<h2 class="text-2xl font-bold text-gray-900">Popular</h2>
<div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="group overflow-hidden rounded-xl bg-white shadow transition hover:shadow-lg">
<img src="/media/photo-400x250.jpg" alt="Headphones" class="h-40 w-full object-cover">
<div class="flex items-center justify-between p-4">
<h3 class="font-semibold group-hover:text-indigo-600">Headphones</h3>
<span class="font-bold">$79</span>
</div>
</div>
<div class="group overflow-hidden rounded-xl bg-white shadow transition hover:shadow-lg">
<img src="/media/photo-400x250.jpg" alt="Speaker" class="h-40 w-full object-cover">
<div class="flex items-center justify-between p-4">
<h3 class="font-semibold group-hover:text-indigo-600">Speaker</h3>
<span class="font-bold">$45</span>
</div>
</div>
</div>
</section>In a project the cards come from a loop or a component, as in the lesson on reusing styles.
Call to action and footer
A contrasting sign-up strip and a simple footer finish the page:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<section class="bg-indigo-600">
<div class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-10 sm:flex-row sm:items-center sm:justify-between">
<p class="text-xl font-semibold text-white">10% off your first order</p>
<a href="#" class="rounded-lg bg-white px-5 py-3 text-center font-medium text-indigo-700 hover:bg-indigo-50">Get the code</a>
</div>
</section>
<footer class="mx-auto max-w-5xl px-4 py-6 text-sm text-gray-500">
© 2026 SoundShop. 1 Example Street, Berlin.
</footer>On a phone the text and button stack; on a wide screen they sit in a row at opposite edges.
Common mistake
Giving each section its own width and padding — max-w-4xl here, max-w-6xl px-8 there. The section edges stop lining up, and the page looks sloppy. Use one wrapper in every section, and in a project extract it into a Container component.