PICKER · FOR YOUR AI AGENT

Pick hero sections for your AI agent

Click the sections you want. Their IDs collect in the bar below: copy them and paste them back into Claude Code, Codex or Cursor, and the free Tailkits MCP adds the code to your project.

31 sections4 freeTailwind CSS v4

Code and previews

Hero 1hero-1ProGradient hero with navbar, headline, subtext, email form and CTACode for Hero 1
Hero 2hero-2FreeGradient hero with nav links, headline, tagline and two CTA buttonsCode for Hero 2
Hero 3hero-3ProGradient hero with navbar, headline and taglineCode for Hero 3
Hero 4hero-4ProPurple‑green gradient with tagline, social proof avatars and sign‑up formCode for Hero 4
Hero 5hero-5ProGradient hero with phone mockup, headline, tagline, CTAs and avatarsCode for Hero 5
Hero 6hero-6ProSoft gradient hero with phone mockup, headline, tagline and avatarsCode for Hero 6
Hero 7hero-7ProBlue gradient card with headline and email sign‑upCode for Hero 7
Hero 8hero-8FreeMinimal gradient with headline and two CTA buttonsCode for Hero 8
Hero 9hero-9ProPurple‑blue gradient, headline with email field, CTA and avatarsCode for Hero 9
Hero 10hero-10ProSoft green gradient with headline dual CTAs and avatarsCode for Hero 10
Hero 11hero-11ProSplit layout with browser mockup and headline plus email fieldCode for Hero 11
Hero 12hero-12ProHero with nested frames, headline, tagline and two CTA buttonsCode for Hero 12
Hero 13hero-13ProMinimal hero with large browser mockup, headline and taglineCode for Hero 13
Hero 14hero-14ProPanel hero with screenshot overlay, headline, email signup and avatarsCode for Hero 14
Hero 15hero-15ProGradient hero with vertical phone, headline, tagline, CTAs and avatarsCode for Hero 15
Hero 16hero-16ProGrid-pattern hero with phone mockup, headline, tagline and avatarsCode for Hero 16
Hero 17hero-17ProCentered gradient hero with headline and email sign‑upCode for Hero 17
Hero 18hero-18FreeBlue gradient hero with headline and dual CTA buttonsCode for Hero 18
Hero 19hero-19ProGreen gradient hero with headline, tagline, email input and CTACode for Hero 19
Hero 20hero-20ProPurple‑blue gradient with headline and CTAs plus avatarsCode for Hero 20
Hero 21hero-21ProGradient green hero with screenshot, headline and email sign‑upCode for Hero 21
Hero 22hero-22ProVibrant yellow/orange gradient hero with large screenshot and headline with CTAsCode for Hero 22
Hero 23hero-23FreeGrid background hero with headline and simple subtextCode for Hero 23
Hero 24hero-24ProPatterned hero featuring screenshot, headline, email form and avatarsCode for Hero 24
Hero 25hero-25ProSlanted panel hero with screenshot, headline, tagline, CTAs and avatarsCode for Hero 25
Hero 26hero-26ProDiagonal card with screenshot, headline and avatarsCode for Hero 26
Hero 27hero-27ProNeutral diagonal layout with headline, subtext and email sign‑upCode for Hero 27
Hero 28hero-28ProWave‑shaped hero with headline, subtext, CTAs and screenshotCode for Hero 28
Hero 29hero-29ProMuted gradient hero with headline, email entry, CTA and screenshotCode for Hero 29
Hero 30hero-30ProCircular‑pattern hero with headline, dual CTAs and avatarsCode for Hero 30
Hero 31hero-31ProHoneycomb‑pattern hero with headline, subtext and avatarsCode for Hero 31

0 selected

Click sections to select them. Their IDs collect here.

Paste this back into your agent. No agent waiting? Copy as prompt works in a fresh chat.

Pick hero sections for your AI agent

PICK FROM ANOTHER CATEGORY