Tailwind CSS Hero Sections

Use these Tailwind CSS hero section examples to add important messaging, product photos, and call-to-actions to the top of your website. These hero examples are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Simple centered

Split with screenshot on dark

Get the code

Split with screenshot

Get the code

Split with code example

Get the code

Simple centered with background image

Get the code

With app screenshot

Get the code

With app screenshot on dark

Get the code

With phone mockup

Get the code

Split with image

Get the code

With angled image on right

Get the code

With image tiles

Get the code

With offset image

Get the code