React landing page sections for Tailwind CSS
Marketing sections are the building blocks of a SaaS website. Marketing Header is the sticky top bar with dropdown panels, Sign in and Get started, and Marketing Footer closes the page with link columns and a newsletter signup. Between them you stack Hero Section, Feature Grid (icon cards or a bento with drawn visuals), Feature Showcase for a few features in depth, Steps Section, Video Section with a drawn, chaptered walkthrough, Stats Section, Logo Cloud, Testimonials Section, Integrations Section, Pricing Section, FAQ Section and CTA Section. Team Section and Timeline Section tell the company story, Blog Cards Section and Newsletter Section bring in content and signups, and App Download Section promotes a mobile app with store buttons and a QR code. Marketing Section is the frame they all sit in: an eyebrow, a title and a description over a column, so spacing and type stay consistent from one section to the next.
All Marketing Sections[20]
App Download Section
A mobile app promo: a drawn phone with a mini app, store buttons, a QR code to the download page, the rating and feature bullets.
Blog Cards Section
A "From the blog" section: the latest posts as cards, a featured post with a list, dated rows or a sideways rail, with covers drawn in code.
CTA SectionFree
The closing call to action of a page: a title, two actions or an email signup, social proof and a short checklist on a band.
FAQ SectionFree
Frequently asked questions for a marketing page: an accordion, a split layout, an open grid or expandable cards, with topics and search.
Feature Grid
A marketing section that lists product features as icon cards, a bento with drawn visuals, illustrated cards, numbered rows or compact rows.
Feature Showcase
A section that shows a few features in depth: alternating rows, tabs that swap the visual, tall cards or a scroll tour past a pinned visual.
Hero Section
The top of a landing or product page: an announcement pill, a big title, two actions, social proof and a product shot drawn in code.
Integrations Section
A marketing section of linked integration tiles: a filterable grid, an orbit around the product mark, or copy beside a tile wall.
Logo CloudFree
A row of customer wordmarks under a quiet line, as a wrapping grid, an endless marquee with faded edges or a heading beside a ruled grid.
Marketing FooterFree
The bottom of a SaaS website: brand and tagline, link columns, a newsletter signup, a status dot, legal links and social icons.
Marketing HeaderFree
The sticky top bar of a SaaS website: logo, links with dropdown panels, Sign in and Get started, an announcement strip and a phone menu.
Marketing SectionFree
The frame every marketing section sits in: a column with an eyebrow, a title and a description on one shared scale, plus a newsletter form.
Newsletter Section
A newsletter or product updates signup band for a marketing page: centered, split with the latest issue, a raised card or one compact row.
Pricing Section
A compact plans section for a landing page: plans with a Monthly / Yearly switch, a highlighted plan, checklists and a button each.
Stats Section
Big numbers with labels as plain figures, cards, hairline columns, an inverted band or a grid beside the heading, rolling up on first view.
Steps Section
A How it works section: three to five numbered steps, each with an icon, a title, a line of text and a small drawn product visual.
Team Section
The people behind a product: portrait cards, tall portrait cards, a compact roster or a list with bios, plus a "We're hiring" tile.
Testimonials Section
Customer quotes with people, ratings and results: a grid, featured quote, marquee, carousel, wall of love or one large quote.
About Marketing Sections
Most sections come in several layouts set by a prop, and the product visuals are drawn in code with theme tokens instead of images, so they follow light and dark mode and your brand color. On a phone the header folds its links into a bottom sheet, stats sit two by two, and topic rows scroll sideways. The page templates are composed from these same sections. 6 of the 20 sections are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 14 are part of Pro.