Recreational — Tailwind CSS Cannabis Boutique Template (HTML)

About This Item

Shoppers can compare strains, edibles and concentrates side by side in Recreational, a Tailwind CSS 4 template for cannabis stores. This Tailwind CSS cannabis boutique template has 16 pages, so a dispensary, CBD shop or brand can launch a storefront and a blog together.

Dispensaries, CBD Retailers and Head Shops

The design suits several kinds of cannabis business, because the shop and blog pages work for any product range:

• Recreational cannabis shops that need an online presence.
• CBD retailers selling oils, gummies and topicals.
• Marijuana dispensaries showing a strain catalog.
• Cannabis brands that want product showcases and educational articles.
• Head shops and accessory stores selling vaporizers and smoking gear.

16 Pages in This Tailwind CSS Cannabis Boutique Template

The pages fall into four groups.

• Homepage: one landing page.
• Shop: four pages, with a standard grid, a left sidebar view, a right sidebar view and a product detail page.
• Blog: three archive layouts (standard, left sidebar and right sidebar), plus a matching detail page for each one.
• Utility: Comparison, Contact, Login, Signup and a 404 page.

The sidebar options let you choose where filters or article lists sit. The blog also gives you room for strain reviews and buying guides.

Strain Comparison and Product Detail Pages

Two pages carry most of the buying decision. The Comparison page lines up strains, edibles, concentrates and accessories in one view, so a customer can weigh products before choosing. The Product Detail page then holds strain descriptions, potency information and images.

This Tailwind CSS cannabis boutique template also includes a Contact page with location details, a map and an inquiry form, which matters for a store with a physical address. Login and Signup match the rest of the design, and the 404 page keeps visitors inside the store.

Breakpoints, Theme Values and the Shop Grid

Tailwind CSS 4 styles every page through utility classes written in the HTML. You can open the shop page and read how its product grid is laid out right where it sits. Mobile-first breakpoint prefixes change that grid as the screen widens, which helps shoppers browsing on phones.

Theme settings hold the palette, typefaces and spacing, so one edit there updates the shop, blog and account pages together. The design is also retina ready, and it was tested across five major browsers.

Source Files, Placeholders and Icon Sets

Open the compiled pages directly in a browser. The download also contains the Tailwind source, which you can use to change and rebuild the styling. Preview photos are left out, and neutral placeholders fill those spots.

The template is documented. It uses Font Awesome and Flaticon icons, and its fonts come from Google Fonts.