React Social Follow CTA with an Instagram Style Photo Row

Pro

A section that invites people to follow you. A single row of rounded square thumbnails, each with a small Instagram glyph in the corner, sits above a headline, a line of text and a pill button with a gradient border. Five social network marks finish the section underneath.

CTA Section With Instagram Thumbnail Grid block preview

Turn readers into followers

CTA Section with Instagram Thumbnail Grid is a React and Tailwind CSS social follow CTA that previews recent posts as a row of square thumbnails and links to your profile, with marks for five social networks. It suits creators, brands and shops in Next.js or any React app.

It is not an Instagram feed embed. The thumbnails are images you choose and host, which means no third party script, no cookie banner implications and no layout jumps while a feed loads. You can link each thumbnail to the post it shows.

The gradient border on the button nods to the platform without copying its logo into your design, so the section feels on brand for a social prompt while staying yours.

Row, copy and marks

Thumbnail row

Up to eleven rounded squares, 68px on phones, 76px from 640px and 84px from 1024px, each with a small Instagram glyph badge. With an href a thumbnail becomes a link.

Clipped edges

The row hides overflow, so on narrow screens the outer thumbnails are cropped instead of wrapping to a second line.

Headline and lede

An h2 and one line of supporting text, centred.

Gradient button

A pill with an Instagram style gradient border and a plus icon, with label, link and an optional click handler.

Social marks

X, Instagram, Pinterest, Facebook and Bluesky drawn as SVG under the button, decorative by default.

When a follow CTA makes sense

Use it when

You post consistently and the thumbnails can be refreshed with each release of the site.
Creators, restaurants, fashion and lifestyle brands with an active profile.
You want social proof from your own content without embedding a feed.
Blog and portfolio footers that ask readers to keep in touch.
Light or dark sites; both are supported.

Skip it when

You want the latest posts to appear automatically; this shows images you set.
You are not active on the networks shown.
You need the social marks to be links without editing the file.
B2B products where a social follow is not a meaningful next step.

Thumbnails, links and marks

thumbnails takes src, alt and an optional href. Give each one the URL of the post it shows so people can open it. Eleven fill a wide screen; fewer centre themselves.

The five social marks under the button are aria-hidden SVGs, not links. Wrap the ones you use in anchors with aria-labels pointing at your profiles, and delete the networks you are not on. The default headline claims thousands of creators; replace it with your own line.

Choose thumbnails that look good at 84px: strong colour, one subject, little text. Busy images turn into noise at that size, and the row works as a mood board rather than a set of posts to read.

npx wensity@latest add cta-section-with-instagram-thumbnail-grid --type block

page.tsx

import { InstagramThumbnailGridCta } from "@/components/wensity/blocks/cta-section-with-instagram-thumbnail-grid";
import { posts } from "./recent-posts";

export function FollowCta() {
  return (
    <InstagramThumbnailGridCta
      headline="Fresh bakes every morning."
      lede="See what came out of the oven today."
      ctaLabel="Follow the bakery"
      ctaHref="https://www.instagram.com/your-handle"
      thumbnails={posts.slice(0, 11).map((p) => ({ src: p.image, alt: p.caption, href: p.url }))}
    />
  );
}

Props

Prop	Type	Default	Description
`thumbnails`	{ src: string; alt: string; href?: string }[]	-	Post previews in the row. href turns a thumbnail into a link.
`headline`	string	"Loved by thousands of creators worldwide."	Heading under the row. Replace the sample claim.
`lede`	string	-	One line under the heading.
`ctaLabel / ctaHref / onCtaClick`	string / handler	-	The gradient bordered follow button.

Things to know

Gradient border ring

The button's border is a 1.5px gradient from orange through pink to purple, with a matching pink focus ring for keyboard users.

No embed, no tracking

Images are yours, so the section loads no third party scripts and needs no consent for an embed.

Unlinked marks

The social network marks are decorative and cannot be clicked until you wrap them in links.

Cropped row on phones

Overflow is hidden rather than wrapped, so phone visitors see the middle of the row. Put your best thumbnails in the centre.

Static

No animation or state in the block.

Eleven images

A full row loads eleven small images. Serve them at about 168px square for sharp 2x display.

Block details

CTA Section With Instagram Thumbnail Grid

Category: CTA Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Follows the site theme in light and dark
Dependencies: clsxtailwind-merge
Source: 307 lines, 16 KB in one file
Install: wensity add cta-section-with-instagram-thumbnail-grid --type block
Tags: light, dark, cta, instagram, social-proof, community, conversion
Last updated: October 13, 2026