Landing page sections for React and Tailwind
Free landing page sections for React and Tailwind: heroes, feature grids, bento layouts, testimonials, logo clouds, pricing, FAQ, CTA bands and footers.
63 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
These are the sections a landing page is made of, drawn to the same standard as the product components. Stack a hero, a feature bento, proof, pricing, FAQ and a closing call to action and you have a complete page.
Each section installs as one file with its dependencies. The eight templates on this site are built from the same parts, so you can see how they combine before you copy them.
Components 17
Announcement BaruiSlim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.npx shadcn@latest add ui.minidev.pro/r/announcement-bar.jsonBlog CarduiLinked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.npx shadcn@latest add ui.minidev.pro/r/blog-card.jsonCase Study CarduiCase study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.npx shadcn@latest add ui.minidev.pro/r/case-study-card.jsonCookie BanneruiFloating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.npx shadcn@latest add ui.minidev.pro/r/cookie-banner.jsonCta BanneruiTailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.npx shadcn@latest add ui.minidev.pro/r/cta-banner.jsonFaq ListuiAn FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.npx shadcn@latest add ui.minidev.pro/r/faq-list.jsonFeature GriduiA responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.npx shadcn@latest add ui.minidev.pro/r/feature-grid.jsonFooter MegauiA multi column site footer with a brand block and titled link groups that reflow from one to five columns. A React and Tailwind footer for marketing sites.npx shadcn@latest add ui.minidev.pro/r/footer-mega.jsonHerouiA centered landing page hero with an optional eyebrow, a large headline, supporting copy and up to two call to action buttons. A plain Tailwind starting point.npx shadcn@latest add ui.minidev.pro/r/hero.jsonLogo ClouduiA centered, wrapping row of customer or partner logos with names in muted text and an optional mark each. Adds social proof to a Tailwind landing page.npx shadcn@latest add ui.minidev.pro/r/logo-cloud.jsonNav MarketinguiA sticky marketing header with a translucent blurred background, brand link, nav links that hide on mobile and Sign in and Get started buttons. Tailwind built.npx shadcn@latest add ui.minidev.pro/r/nav-marketing.jsonNewsletter SignupuiAn inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.npx shadcn@latest add ui.minidev.pro/r/newsletter-signup.jsonPress QuoteuiA centered press or testimonial quote using figure, blockquote and figcaption, with a large quoted line and an uppercase source. Adds proof to landing pages.npx shadcn@latest add ui.minidev.pro/r/press-quote.jsonSocial ProofuiSocial proof row of up to five overlapping avatars with initials fallback, next to a count label like 2,000 teams. Built in React for landing page heroes.npx shadcn@latest add ui.minidev.pro/r/social-proof.jsonStats StripuiTailwind stats strip of centered value and label cells split by hairlines, two columns on mobile and four on desktop. Shows traction numbers on landing pages.npx shadcn@latest add ui.minidev.pro/r/stats-strip.jsonTestimonialuiTestimonial card with a quote, avatar with initials fallback, name and role, using semantic figure and blockquote markup. Built in Tailwind for landing pages.npx shadcn@latest add ui.minidev.pro/r/testimonial.jsonBento GriduiA responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.npx shadcn@latest add ui.minidev.pro/r/bento-grid.json
Blocks and full pages 10
Bento LiveblockA React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.npx shadcn@latest add ui.minidev.pro/r/bento-live.jsonChangelog PageblockA Tailwind changelog card listing releases with a monospace version, tag badge, date, title and summary, separated by hairline dividers.npx shadcn@latest add ui.minidev.pro/r/changelog-page.jsonCta BandblockA closing CTA section with a large lit headline and an inline email form whose button animates from idle to sending to a success check. Async onSubmit.npx shadcn@latest add ui.minidev.pro/r/cta-band.jsonFaq SectionblockAn FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.npx shadcn@latest add ui.minidev.pro/r/faq-section.jsonHero SpotlightblockA launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.npx shadcn@latest add ui.minidev.pro/r/hero-spotlight.jsonMarketing LandingblockA complete Tailwind landing page assembled from a hero with two actions, a logo cloud, a stats strip, a three column feature grid and a closing CTA banner.npx shadcn@latest add ui.minidev.pro/r/marketing-landing.jsonPremium LandingblockA React motion landing page combining an aurora hero, an animated feature row, three tier pricing cards that rise into view and a glowing closing CTA.npx shadcn@latest add ui.minidev.pro/r/premium-landing.jsonSaas Marketing PageblockA full SaaS marketing page stacking a kinetic pitch hero, moving logo wall, feature bento, free versus premium compare, testimonials and a magnetic CTA.npx shadcn@latest add ui.minidev.pro/r/saas-marketing-page.jsonScroll StoryblockA scrollytelling section: steps scroll on one side while a pinned visual swaps as each reaches mid screen and a progress rail fills. Inline on mobile.npx shadcn@latest add ui.minidev.pro/r/scroll-story.jsonSocial Proof WallblockA testimonial wall with a logo marquee that pauses on hover and three columns of quote cards drifting at different speeds, with metric chips and edge fades.npx shadcn@latest add ui.minidev.pro/r/social-proof-wall.json
Motion 36
Agency PortfoliomotionAn agency portfolio page with a marketing navbar, animated headline, project cards that fade up in sequence as they scroll in, and a mega footer.npx shadcn@latest add ui.minidev.pro/r/agency-portfolio.jsonBlog HomemotionA blog index page with a marketing nav, tag filter chips for all, design and engineering, a grid of post cards with excerpts and dates, and a footer.npx shadcn@latest add ui.minidev.pro/r/blog-home.jsonBrand Kit PagemotionA brand showcase page combining poster type, a typographic marquee, tilt cards, a text scramble, a grid reveal, a price morph and a magnetic CTA.npx shadcn@latest add ui.minidev.pro/r/brand-kit-page.jsonCareers PagemotionA React careers page with a marketing nav, animated headline, open roles listing location and employment type with apply buttons, and a mega footer.npx shadcn@latest add ui.minidev.pro/r/careers-page.jsonChangelog MarketingmotionA marketing changelog with a gradient masked headline, a subscribe CTA and a timeline of versions with highlight dots and bullet lists that slide in.npx shadcn@latest add ui.minidev.pro/r/changelog-marketing.jsonChangelog MotionmotionA React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.npx shadcn@latest add ui.minidev.pro/r/changelog-motion.jsonClient Pitch KitmotionA full client pitch page chaining a kinetic hero, metric ticker, live component rail, product mock, proof panel, before and after wipe, FAQ and quotes.npx shadcn@latest add ui.minidev.pro/r/client-pitch-kit.jsonCommand WaitlistmotionA React terminal styled waitlist card with a join --email prompt, a required email input and a join button that confirms, springing into view on scroll.npx shadcn@latest add ui.minidev.pro/r/command-waitlist.jsonContact SalesmotionA contact sales page with an animated headline, a case study card and press quote on one side, and a work email, company and message form on the other.npx shadcn@latest add ui.minidev.pro/r/contact-sales.jsonCta GlowmotionA call to action card in Tailwind with soft accent glow layers, a title, optional description, a magnetic get started button and an outline button.npx shadcn@latest add ui.minidev.pro/r/cta-glow.jsonFaq Accordion MotionmotionAn FAQ accordion where one answer opens at a time with an animated height transition. Triggers expose aria-expanded and motion is skipped when reduced.npx shadcn@latest add ui.minidev.pro/r/faq-accordion-motion.jsonFeature Bento MotionmotionA four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.npx shadcn@latest add ui.minidev.pro/r/feature-bento-motion.jsonHero AuroramotionA React hero with slow drifting aurora gradient blobs behind an eyebrow, headline, description and two action buttons that fade up in sequence.npx shadcn@latest add ui.minidev.pro/r/hero-aurora.jsonHero BentomotionA Tailwind hero section with a large headline above a bento grid of product tiles for AI, billing, auth and admin that fade up with a stagger on load.npx shadcn@latest add ui.minidev.pro/r/hero-bento.jsonHero Client PitchmotionA React pitch hero where headline words slide up from masks in sequence, followed by a lede, showcase and gallery buttons, and a row of proof stats.npx shadcn@latest add ui.minidev.pro/r/hero-client-pitch.jsonHero Editorial SplitmotionA two column editorial hero in Tailwind with a masked two line headline and lede on the left and an animated device frame stack on the right.npx shadcn@latest add ui.minidev.pro/r/hero-editorial-split.jsonHero Gradient MeshmotionA dark hero on a layered radial gradient mesh with a scale in headline, supporting copy and high contrast launch and docs buttons for launch pages.npx shadcn@latest add ui.minidev.pro/r/hero-gradient-mesh.jsonHero Kinetic TypemotionA kinetic type hero where each headline line slides up from a mask with staggered timing and the last line is accented. Pass your own lines and copy.npx shadcn@latest add ui.minidev.pro/r/hero-kinetic-type.jsonHero Marquee BrandsmotionA hero headline above an endlessly scrolling marquee of brand names for social proof. The loop stops when reduced motion is requested by the user.npx shadcn@latest add ui.minidev.pro/r/hero-marquee-brands.jsonHero Poster TypemotionA poster scale typography hero in React whose three headline lines rise from masks in turn, with an eyebrow, supporting copy and a magnetic CTA.npx shadcn@latest add ui.minidev.pro/r/hero-poster-type.jsonHero Split ShowcasemotionA split hero with headline and copy on the left and a product card on the right whose bar chart grows into place on load. Suits launch and docs homes.npx shadcn@latest add ui.minidev.pro/r/hero-split-showcase.jsonHero Typed HeadlinemotionA centered hero whose headline cycles through rotating words such as dashboards and AI apps with a slide transition. Rotation pauses for reduced motion.npx shadcn@latest add ui.minidev.pro/r/hero-typed-headline.jsonInvestor UpdatemotionAn investor update page with a gradient headline, flip counting stats, a highlights list, a product rail and a cursor spotlight panel for the ask.npx shadcn@latest add ui.minidev.pro/r/investor-update.jsonLaunch CountdownmotionA React launch countdown showing days, hours, minutes and seconds to a target time, with digits that slide in on each tick and a waitlist call to action.npx shadcn@latest add ui.minidev.pro/r/launch-countdown.jsonLogo Wall MotionmotionA logo wall that scrolls brand names in an endless marquee loop. Pass your own logos array; the motion stops for users who prefer reduced motion.npx shadcn@latest add ui.minidev.pro/r/logo-wall-motion.jsonMarquee QuotesmotionTwo rows of testimonial quotes scrolling in opposite directions as looping React marquees. Pass quote and name pairs; motion stops for reduced motion.npx shadcn@latest add ui.minidev.pro/r/marquee-quotes.jsonProduct LaunchmotionA product launch page with a scroll progress rail, kinetic hero, device stack, sticky feature story, before and after wipe, stats, countdown and waitlist.npx shadcn@latest add ui.minidev.pro/r/product-launch.jsonProduct Os MockmotionA mock product interface that auto cycles through inbox, pipeline and agents views with animated rows and progress bars. Click the sidebar to switch.npx shadcn@latest add ui.minidev.pro/r/product-os-mock.jsonProduct TourmotionA React product tour with a clickable list of steps beside a detail panel that fades in for the active step, plus back and next buttons that stop at the ends.npx shadcn@latest add ui.minidev.pro/r/product-tour.jsonSaas LandingmotionA full React SaaS landing template with an aurora hero, logo wall, counting stats, animated features, pricing cards, a testimonial carousel, FAQ and CTA.npx shadcn@latest add ui.minidev.pro/r/saas-landing.jsonSplit Proof PanelmotionA two column proof section with a badge, pitch copy and checklist on one side, and key facts on gallery, registry and quality gates rising in on the other.npx shadcn@latest add ui.minidev.pro/r/split-proof-panel.jsonStatus MarketingmotionA status marketing section with an incident banner, operational badge, gradient headline and uptime bars for showing off reliability on a public page.npx shadcn@latest add ui.minidev.pro/r/status-marketing.jsonSticky Cta BarmotionA Tailwind floating CTA bar that slides up from the bottom once the page scrolls past 320px, with a title, a docs link and a magnetic get started button.npx shadcn@latest add ui.minidev.pro/r/sticky-cta-bar.jsonTestimonial CarouselmotionA React testimonial carousel that auto advances every few seconds with slide transitions, dot indicators using aria-current, and prev and next buttons.npx shadcn@latest add ui.minidev.pro/r/testimonial-carousel.jsonWaitlist HeromotionA React waitlist hero with a pulsing background glow, an email input, a request access button with an onSubmit callback, and an avatar stack of signups.npx shadcn@latest add ui.minidev.pro/r/waitlist-hero.jsonWaveform HeromotionA hero with an audio waveform of hairline bars that pulse in a staggered loop, a headline, copy and a magnetic CTA. Bars hold still for reduced motion.npx shadcn@latest add ui.minidev.pro/r/waveform-hero.json
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Can I build a whole landing page from these blocks?
Yes. Install the sections you need and stack them in a page. The Next.js landing page guide shows the order and the copy that works.
Are the sections responsive?
Yes. Every section is designed for mobile first and tested at phone, tablet and desktop widths.
Can I download a full template?
Templates are live demos made from these blocks plus custom product UI. The blocks are free to install, and MiniDev can build the full template for your product.