# 16 Hero Section Templates for React & Tailwind

> Above-the-fold hero sections for SaaS, AI and product landing pages. Pick a layout with a drawn product dashboard, phone mockup, video frame, typing terminal or editorial serif headline; each one animates on load and works from 360px to wide desktop.

3 of 16 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Hero Before After Toggle](https://pixelpapa.com/components/heroes/hero-before-after-toggle.md) (Pro): A hero with a Before / After switch: the same nine request cards spring from a scattered pile into three labelled, colour-coded lanes and back.
- [Hero Cursor Spotlight](https://pixelpapa.com/components/heroes/hero-cursor-spotlight.md) (Pro): An always-dark hero where a soft light trails the pointer and reveals a hidden grid of service nodes; it wanders on its own until you move.
- [Hero Dashboard Lift](https://pixelpapa.com/components/heroes/hero-dashboard-lift.md): Centered headline over a product window that tilts flat as you scroll, with staggered entrance.
- [Hero Drifting Card Rows](https://pixelpapa.com/components/heroes/hero-drifting-card-rows.md) (Pro): Three tilted rows of small UI cards drift in opposite directions behind a headline that sits in a soft cleared pocket.
- [Hero Editorial Serif](https://pixelpapa.com/components/heroes/hero-editorial-serif.md) (Pro): A magazine-style opener: an oversized serif headline rises line by line from behind hairlines that draw across an asymmetric grid.
- [Hero Grid Cells Reveal](https://pixelpapa.com/components/heroes/hero-grid-cells-reveal.md): A hero on a spreadsheet-like grid where cells light up in rings that ripple out from the headline, and individual cells glow under the pointer.
- [Hero Mesh Gradient](https://pixelpapa.com/components/heroes/hero-mesh-gradient.md) (Pro): An inset poster hero filled with a slowly shifting CSS mesh of theme colours, with bottom-anchored type and a glass stat strip.
- [Hero Orbiting Icons](https://pixelpapa.com/components/heroes/hero-orbiting-icons.md): An integrations hero where app icons ride three counter-rotating rings over a horizon, staying upright as they rise and set around a glowing core.
- [Hero Phone Mockup](https://pixelpapa.com/components/heroes/hero-phone-mockup.md) (Pro): A split hero with a floating CSS phone whose app screen stays alive: new expenses spring into the list and the balance rolls to match.
- [Hero Rotating Words](https://pixelpapa.com/components/heroes/hero-rotating-words.md) (Pro): A type-led hero whose second line swaps audiences letter by letter out of a blur while an underline redraws and a matching booking chip updates.
- [Hero Social Proof Avatars](https://pixelpapa.com/components/heroes/hero-social-proof-avatars.md) (Pro): A hero led by its customers: an avatar row lifts whoever is speaking, stars fill in sequence, and that person's quote crossfades beneath the call to action.
- [Hero Split Email Capture](https://pixelpapa.com/components/heroes/hero-split-email-capture.md) (Pro): A two-column hero whose email field validates, shakes on a bad address and morphs into a confirmation, beside a tilted preview of the email you will get.
- [Hero Stacked Cards 3D](https://pixelpapa.com/components/heroes/hero-stacked-cards-3d.md) (Pro): A fintech hero with a stack of payment cards in real perspective: it tilts toward the pointer, fans out on hover and sends the top card to the back on click.
- [Hero Terminal Typing](https://pixelpapa.com/components/heroes/hero-terminal-typing.md) (Pro): A developer hero with a terminal that types its own commands, prints staged output and loops, next to a copyable install line.
- [Hero Video Frame](https://pixelpapa.com/components/heroes/hero-video-frame.md) (Pro): A centered hero over a faux video player: rings ripple out of the play button, and pressing it starts the scene, scrubber and timecode.
- [Hero Waitlist Countdown](https://pixelpapa.com/components/heroes/hero-waitlist-countdown.md) (Pro): A launch hero with a live countdown whose digits roll individually, and a waitlist field that turns into your place in the queue.