Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/promo-sections

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Components

  • Product Overviews

  • Product Lists

  • Category Previews

  • Shopping Carts

  • Category Filters

  • Product Quickviews

  • Product Features

  • Store Navigation

  • Promo Sections

  • Checkout Forms

  • Reviews

  • Order Summaries

  • Order History

  • Incentives

• Page Examples

  • Storefront Pages

  • Product Pages

  • Category Pages

  • Shopping Cart Pages

  • Checkout Pages

  • Order Detail Pages

  • Order History 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

Promo Sections

Use these Tailwind CSS promo section components to highlight special offers, new arrivals, or featured products with banners and promotional content. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

With image tiles

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With image tiles

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With fading background image and testimonials

---

Preview

Get the code →

With fading background image and testimonials

---

Preview

Get the code →

Full-width with background image

---

Preview

Get the code →

Full-width with background image

---

Preview

Get the code →

Full-width with overlapping image tiles

---

Preview

Get the code →

Full-width with overlapping image tiles

---

Preview

Get the code →

With background image

---

Preview

Get the code →

With background image

---

Preview

Get the code →

With overlapping image tiles

---

Preview

Get the code →

With overlapping image tiles

---

Preview

Get the code →

With offers and split image

---

Preview

Get the code →

With offers and split image

---

Preview

Get the code →

Full-width with background image and large content

---

Preview

Get the code →

Full-width with background image and large content

---

Preview

Get the code →