Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Page Sections

  • Hero Sections

  • Feature Sections

  • CTA Sections

  • Bento Grids

  • Pricing Sections

  • Header Sections

  • Newsletter Sections

  • Stats

  • Testimonials

  • Blog Sections

  • Contact Sections

  • Team Sections

  • Content Sections

  • Logo Clouds

  • FAQs

  • Footers

• Elements

  • Headers

  • Flyout Menus

  • Banners

• Feedback

  • 404 Pages

• Page Examples

  • Landing Pages

  • Pricing Pages

  • About Pages

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

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

---

PreviewCode

HTMLReactVue

Simple centered

---

PreviewCode

HTMLReactVue

Split with screenshot

---

Preview

Get the code →

Split with screenshot

---

Preview

Get the code →

Split with bordered screenshot

---

Preview

Get the code →

Split with bordered screenshot

---

Preview

Get the code →

Split with code example

---

Preview

Get the code →

Split with code example

---

Preview

Get the code →

Simple centered with background image

---

Preview

Get the code →

Simple centered with background image

---

Preview

Get the code →

With bordered app screenshot

---

Preview

Get the code →

With bordered app screenshot

---

Preview

Get the code →

With app screenshot

---

Preview

Get the code →

With app screenshot

---

Preview

Get the code →

With phone mockup

---

Preview

Get the code →

With phone mockup

---

Preview

Get the code →

Split with image

---

Preview

Get the code →

Split with image

---

Preview

Get the code →

With angled image on right

---

Preview

Get the code →

With angled image on right

---

Preview

Get the code →

With image tiles

---

Preview

Get the code →

With image tiles

---

Preview

Get the code →

With offset image

---

Preview

Get the code →

With offset image

---

Preview

Get the code →