Tailwind CSS v3.2Dynamic breakpoints, container queries, and more

Primer

SavvyCal

Der Spiegel

Screenshot of the Primer Tailwind UI template. The visible section has an image of the book cover on the left side. On the right is a reader testimonial with a five star rating. The page heading and introduction paragraph are followed by call-to-action buttons labelled 'Get sample chapter' and 'Buy book'.

Technologies: Tailwind CSS, Next.js, React
Date: September 30, 2022
URL: tailwindui.com/templates/primer

Go to website

Primer

A stunning landing page template for your next course or ebook.

Primer is a beautiful info product template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team. It’s production-ready and easy to customize, making it the perfect starting point for your own info product site.

Use this template for your own website →

Screenshot of the 'Resources' section of the Primer Tailwind UI template. Across the top of the screen is a list of page sections in a row. The 'Resources' section is highlighted. Below is the resources section itself, with a small title and a pair of introduction paragraphs. Underneath is a row of resources with three columns. Each resource has an image, title, and short description. — A horizontal menu with links to different sections of the homepage. The menu becomes sticky as you scroll down the page.

Mobile screenshot of the Primer Tailwind UI template. At the top is an image of a book cover. Underneath is a reader testimonial with a five star rating. — The Primer template experience on mobile devices.

Mobile screenshot of the 'Table of contents' section of the Primer Tailwind UI template. At the top of the screen is a dropdown displaying the current section, in this case 'Contents'. After some introduction text the chapters are listed with their page numbers. — The Primer template experience on mobile devices.

Screenshot of the 'Pricing' section of the Primer Tailwind UI template. Across the top of the screen is a list of page sections in a row. The 'Pricing' section is highlighted. Below is the pricing section itself, with the two plans arranged side-by-side. Each plan has a price, name, summary, features list, and 'Get started' button. — The pricing section of the homepage with two price tiers: The Essential plan and the highlighted Complete plan.

Screenshot of the 'Author' section of the Primer Tailwind UI template. Across the top of the screen is a list of page sections in a row. The 'Author' section is highlighted. Below is the author section itself, with a circular photograph of the author and some text written in first person. — The author section of the homepage featuring the course or ebook author with a headshot and bio.