Hero Sections

Mobile app hero with phone frame

Copy on the left, a CSS-drawn handset on the right

Live preview

The prompt

Create an app landing hero with Tailwind CSS in two columns on a neutral-950 background. The left column holds a small pill with a star glyph and a rating line, a large white headline, a light grey paragraph, two store buttons drawn as bordered rounded-xl blocks with a glyph and two lines of text each, and a row of three tiny trust notes with check glyphs. The right column is a phone drawn entirely in CSS: a rounded-[2.5rem] neutral-800 frame with a thin border, a notch bar, and inside a white screen showing a mock app — a header row with an avatar and a bell glyph, a balance card with a large figure and a green delta, three transaction rows with a square glyph tile, name, time and amount, and a bottom tab bar of four small shapes. Add a soft blurred glow behind the phone. Stack to one column below lg with the phone centred.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .

Create an app landing hero with Tailwind CSS in two columns on a neutral-950 background. The left column holds a small pill with a star glyph and a rating line, a large white headline, a light grey paragraph, two store buttons drawn as bordered rounded-xl blocks with a glyph and two lines of text each, and a row of three tiny trust notes with check glyphs. The right column is a phone drawn entirely in CSS: a rounded-[2.5rem] neutral-800 frame with a thin border, a notch bar, and inside a white screen showing a mock app — a header row with an avatar and a bell glyph, a balance card with a large figure and a green delta, three transaction rows with a square glyph tile, name, time and amount, and a bottom tab bar of four small shapes. Add a soft blurred glow behind the phone. Stack to one column below lg with the phone centred.