Six full-height section patterns: a hero that fills the screen, panels that snap as you scroll, a split picture and text section, a cover with a darkening overlay, a sticky footer layout and an edge-to-edge call to action.
A hero that fills the screen with min-h-svh, shown here at a fixed preview height. svh units use the small viewport height, so mobile browser toolbars never cut off the bottom of the section.
Panels that each fill the viewport and snap into place as you scroll, built with snap-y snap-mandatory on the scroller and snap-start on each panel. The scroller is a labelled region that keyboard users can focus and scroll.
A section split between a picture and text, stacked top and bottom here with grid-rows-2; on wide screens the same pattern becomes side by side with md:grid-cols-2. Both halves share the full height.
View code
<section class="grid h-72 w-full max-w-xs grid-rows-2 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 md:max-w-xl md:grid-cols-2 md:grid-rows-1">
<div role="img" aria-label="Ceramic mugs on a shelf" class="bg-[linear-gradient(#fef3c7_60%,#d6d3d1_60%_62%,#fef3c7_62%),radial-gradient(circle_at_30%_45%,#0f766e_0_14%,transparent_15%)] [background-blend-mode:multiply]"></div>
<div class="grid content-center p-5"><h3 class="text-xl font-bold text-slate-900">Made by hand in Porto</h3><p class="mt-1 text-sm text-slate-600">Small-batch ceramics, fired twice and glazed one at a time.</p></div>
</section>
04. Tailwind Cover Section with Overlay
TailwindSectionOverlay
A full-bleed cover with the heading anchored to the bottom over a darkening gradient, so the text stays readable on any picture. flex flex-col justify-end pushes the content down.
The footer stays at the bottom even when the page is short. The page is flex flex-col with a minimum height and the main area is flex-1, so it absorbs any spare space.
View code
<div class="flex min-h-[280px] w-full max-w-xs flex-col overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200">
<div class="bg-slate-900 px-4 py-3 text-sm font-bold text-white">Header</div>
<div class="flex-1 p-4 text-sm text-slate-700">Short page content. The footer below still sits at the bottom.</div>
<div class="border-t border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600">Footer · always at the bottom</div>
</div>
06. Tailwind Full-Width Call-to-Action Band
TailwindSectionCTA
A closing band that runs edge to edge with a gradient, a short heading and two actions. The buttons wrap onto two lines on small screens thanks to flex-wrap and justify-center.
View code
<section class="w-full max-w-sm rounded-2xl bg-gradient-to-r from-emerald-700 to-teal-800 px-6 py-10 text-center">
<h3 class="text-balance text-2xl font-black text-white">Ready to open your store?</h3>
<p class="mt-1 text-sm text-emerald-50">Set up in an afternoon. Cancel any time.</p>
<div class="mt-5 flex flex-wrap justify-center gap-3"><a href="#start" class="rounded-lg bg-white px-4 py-2 text-sm font-semibold text-emerald-900 hover:bg-emerald-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Start free</a><a href="#demo" class="rounded-lg px-4 py-2 text-sm font-semibold text-white ring-1 ring-white/70 hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Watch a demo</a></div>
</section>
About these Tailwind Full Page Sections
Use svh for full height
min-h-svh uses the small viewport height, so mobile browser toolbars never hide the bottom of a full-height section. The demos use fixed heights to fit the preview.
Snap with care
snap-y snap-mandatory feels great for short stories but can trap long content; use snap-proximity if sections may be taller than the screen.
Overlay for readable text
A gradient from black at the bottom to transparent at the top keeps headings readable on any photo.
Footer at the bottom
Make the page flex flex-col with a minimum height and give the main area flex-1.
Frequently asked questions
What's the difference between h-screen and min-h-svh?
h-screen fixes the height to 100vh and can cut content off; min-h-svh grows if the content is taller.
Do snap sections work with keyboard?
Yes, once the scroll container has focus, arrow keys and Page Down move between panels.