Charcoal UI

112 React Landing Page Sections for Tailwind | Charcoal UI

112 animated heroes, features, pricing tables, testimonials, FAQs, navbars and footers for React and Tailwind. Preview at any width, install in one command.

  • Hero Ember (Hero, Pro): Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
  • Hero Split (Hero, Pro): Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
  • Hero Rotating (Hero, Pro): A headline whose last word rolls through options, an email capture and avatar social proof.
  • Hero Terminal (Hero, Pro): Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
  • Hero Showcase (Hero, Pro): Words rise out of a blur above a tilting product shot, with a logo marquee underneath.
  • Hero App (Hero, Pro): Mobile app hero: a phone with live UI, floating notification cards and store buttons.
  • Hero Waitlist (Hero, Pro): Launch waitlist with a countdown, sonar rings and an email form that confirms in place.
  • Hero Gallery (Hero, Pro): Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
  • Hero Dashboard (Hero, Pro): A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
  • Hero Landscape (Hero, Pro): A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
  • Hero Statement (Hero, Pro): A single statement that lights up word by word as you scroll, with a spinning scroll badge.
  • Features Grid (Features, Pro): Six feature cards with an ember spotlight that follows the pointer, revealed in a stagger.
  • Features Bento (Features, Pro): A bento grid where every tile is a working component, not a screenshot.
  • Features Alternating (Features): Alternating image and text rows that slide in from opposite sides as you scroll.
  • Features Tabs (Features, Pro): Feature tabs that auto-advance with a filling progress bar, swapping a visual on the right.
  • Features Sticky Scroll (Features, Pro): A sticky list on the left lights up the step you are reading while visuals scroll past on the right.
  • Features Orbit (Features, Pro): Integrations section: icons orbit your logo next to a checklist of what connects.
  • Pricing Tiers (Pricing, Pro): Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
  • Pricing Single (Pricing): One honest plan: a big price, everything included, and a guarantee.
  • Pricing Comparison (Pricing, Pro): A full feature comparison table with a sticky plan header.
  • Pricing Usage (Pricing, Pro): Usage-based pricing: drag the slider and the monthly estimate rolls to match.
  • Testimonials Marquee (Testimonials, Pro): Two rows of quotes drifting in opposite directions, pausing on hover.
  • Testimonials Wall (Testimonials, Pro): A masonry wall of quotes with ratings, revealed as you scroll.
  • Testimonials Spotlight (Testimonials, Pro): One large quote at a time, with avatar buttons to switch between voices.
  • Logo Cloud (Social proof, Pro): A muted marquee of customer wordmarks under a short trust line.
  • Stats Counters (Social proof, Pro): Four big numbers that roll into place when they enter view.
  • Stats Chart (Social proof, Pro): Growth story: stat cards beside an animated bar chart.
  • CTA Ember (CTA, Pro): A closing band with rising embers and a shimmering call to action.
  • CTA Landscape (CTA, Pro): A moonlit photo card with a silver metal headline and a liquid-metal button.
  • CTA Newsletter (CTA, Pro): Newsletter signup that validates inline and confirms with a drawn check.
  • CTA Download (CTA, Pro): App download card with store buttons and a QR code for desktop visitors.
  • FAQ Split (FAQ): Heading and contact link on the left, a springy accordion on the right.
  • FAQ Grid (FAQ, Pro): Questions laid out in a grid with a contact card, for short answers.
  • Navbar Floating (Navbar, Pro): A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Navbar Mega Menu (Navbar, Pro): A full-width bar with a mega menu that unfolds on hover or focus.
  • Footer Columns (Footer): Brand, four link columns, a newsletter field and a bottom bar.
  • Footer Wordmark (Footer, Pro): An enormous wordmark that rises into view, under a short row of links.
  • Footer Minimal (Footer): One quiet row: brand, a few links and the year.
  • Hero Editorial (Hero, Pro): A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
  • Hero Chat (Hero, Pro): Split hero with an assistant conversation that streams its own answers, turn by turn.
  • Hero Search (Hero, Pro): Marketplace hero built around one big search box with typed example queries and category chips.
  • Hero Spec (Hero, Pro): Hardware launch hero: a CSS-drawn product with spec callouts on leader lines and a finish picker.
  • Hero Local (Hero, Pro): Local business hero with open-now status, rating, address and a quick table booking card.
  • Hero Event (Hero, Pro): Conference hero with a split-flap board of cities and dates, a live countdown and the speaker line-up.
  • Hero Manifesto (Hero, Pro): Full-height serif manifesto: lines rise in turn, numbered principles and a hand-drawn signature.
  • Hero Before After (Hero, Pro): Photo tool hero where visitors drag a divider to compare the raw shot with the enhanced one.
  • Hero Diff (Hero, Pro): Dev tool hero: a pull request diff that a reviewer bot flags, comments on and merges.
  • Hero Film (Hero, Pro): Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
  • Features Versus (Features, Pro): Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
  • Features Steps (Features, Pro): Numbered how-it-works steps joined by a line that draws itself as the section scrolls in.
  • Features Integrations (Features, Pro): Searchable integrations directory with category filters, monogram tiles and a request link.
  • Features Security (Features, Pro): Trust section with certification seals, the controls behind them and a live uptime gauge.
  • Features AI Demo (Features, Pro): Try-it-now block: visitors pick a prompt and watch the product stream its answer.
  • Features Roadmap (Features, Pro): Public roadmap in Now, Next and Later columns with upvotes that re-sort the cards.
  • Features Metrics (Features, Pro): Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
  • Features Vertical Tabs (Features, Pro): Vertical feature list that advances on its own, with a progress bar and a crossfading photo.
  • Features Hover List (Features, Pro): Services as a big type list; hovering a row floats a photo beside the cursor.
  • Features Keyboard (Features, Pro): A drawn keyboard that presses each shortcut in turn, for keyboard-first products.
  • Pricing Calculator (Pricing, Pro): Usage calculator: drag seats and volume, toggle add-ons and watch an itemised monthly total update.
  • Pricing Donation (Pricing, Pro): Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
  • Pricing Lifetime (Pricing, Pro): Lifetime deal card with a strike-through price, seats-claimed bar, end timer and refund promise.
  • Pricing Enterprise (Pricing, Pro): Self-serve plan beside an enterprise card with the sales form built in, so big buyers never leave.
  • Pricing Credits (Pricing, Pro): Credit packs for AI products with bonus credits and a live readout of what each pack buys.
  • Testimonials Video (Testimonials, Pro): Video testimonial cards that expand on play with captions and a running progress bar.
  • Testimonials Tweets (Testimonials, Pro): Masonry wall of social posts that fades out at the bottom into a read-more button.
  • Testimonials Case Study (Testimonials, Pro): Case studies as tabs: each customer gets a photo, a quote and three results that count up.
  • Testimonials Rating (Testimonials, Pro): Store-style review summary with an average, a star histogram that filters, and verified reviews.
  • Testimonials Letter (Testimonials, Pro): A customer's thank-you letter on lined paper with a serif body, a P.S. and a self-drawing signature.
  • Logo Wall (Social proof, Pro): Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
  • Press Quotes (Social proof, Pro): As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
  • Awards (Social proof, Pro): SVG laurels around each award, with the rank, the prize, who gave it and the year.
  • Stats Live (Social proof, Pro): Dotted world map with live pings, a running counter and a feed of what just happened where.
  • CTA Terminal (CTA, Pro): Developer CTA with a copyable install command beside a terminal that runs it.
  • CTA Countdown (CTA, Pro): Limited-time offer band with a promo code, a live countdown and a shimmering button.
  • CTA Ticket (CTA, Pro): RSVP block where visitors tear a ticket along its perforation to claim a seat.
  • CTA Steps (CTA, Pro): Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
  • CTA Marquee (CTA, Pro): Giant scroll-reactive marquee type with a round let's-talk button on top, for studios.
  • FAQ Search (FAQ, Pro): Help-centre FAQ with instant search, highlighted matches and topic chips.
  • FAQ Chat (FAQ, Pro): FAQ as a support chat: tap a question and a teammate types the answer back.
  • FAQ Support (FAQ, Pro): FAQ accordion beside a sticky support card with the team, live status and reply time.
  • Team Grid (Team, Pro): Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
  • Team Founders (Team, Pro): Founders' story with an editorial serif headline, who started it and a timeline of milestones.
  • Team Careers (Team, Pro): Open roles board with team filters, a remote-only toggle, posted salaries and perks.
  • Team Values (Team, Pro): Company values as huge numbered rows that open to show what each one means in practice.
  • Contact Form (Contact, Pro): Contact form with topic pills, inline validation and a success state, beside your details.
  • Contact Offices (Contact, Pro): Office cards with each city's local time and whether the studio is open right now.
  • Contact Booking (Contact, Pro): Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
  • Contact Support (Contact, Pro): Support hub with every channel's live status and reply time, plus a system status strip.
  • Blog Grid (Content, Pro): Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
  • Blog Featured (Content, Pro): Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
  • Changelog (Content, Pro): Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • Resources Library (Content, Pro): Resource library with type tabs and search across guides, webinars, templates and reports.
  • Newsletter Issues (Content, Pro): Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
  • Gallery Masonry (Gallery, Pro): Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
  • Gallery Accordion (Gallery, Pro): Destinations as an image accordion: hover a slim panel and it opens wide with its details.
  • Gallery Filmstrip (Gallery, Pro): A strip of 35mm film with sprocket holes and frame numbers, plus a large view of the chosen frame.
  • Gallery Work Index (Gallery, Pro): Agency work index as a table, with a preview image that follows the cursor over each row.
  • Product Detail (Commerce, Pro): Product page for an art print: thumbnails, live frame preview, size pricing, quantity and add to bag.
  • Product Grid (Commerce, Pro): Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
  • Menu Restaurant (Commerce, Pro): Printed-menu section with serif dishes, dotted price leaders, dietary tags and course tabs.
  • Listings Stays (Commerce, Pro): Rental listings beside a stylised map where hovering a card lifts its price pin, and back again.
  • Commerce Bundle (Commerce, Pro): Build-a-box bundle with drawn coffee bags and a progress bar that unlocks bigger discounts.
  • Event Schedule (Events, Pro): Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
  • Event Speakers (Events, Pro): Speaker line-up as a big name list; the focused speaker's duotone card and talk appear alongside.
  • Event Tickets (Events, Pro): Ticket tiers with sold-out bars and quantity steppers, totalled into one checkout bar.
  • Podcast Episodes (Media, Pro): Podcast block with show art, an episode list and a player with a live visualiser and scrubber.
  • Video Library (Media, Pro): Course video library with continue-watching bars, level filters and hover-to-play thumbnails.
  • Music Album (Media, Pro): Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
  • Navbar Announcement (Navbar, Pro): Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
  • Navbar Centered (Navbar, Pro): Editorial shop nav with a big centred serif wordmark that shrinks on scroll and a bag count.
  • Footer Newsletter (Footer, Pro): Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
  • Footer Contact (Footer, Pro): Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.