Hempira — Tailwind CSS CBD Template (HTML)

About This Item

Hempira shows a shopper the milligrams in every drop, gummy and gram, then backs them with a lab certificate for the batch. This Tailwind CSS CBD template suits shops that sell oils, gummies, edibles, hemp flower and balms. Its styling is written for Tailwind CSS 4. The look is a night-green ground, amber buttons, ivory and sand pages and fine line-art hemp leaves, set in Prompt and Castoro.

Home Pages for a CBD and Hemp Wellness Shop

The template has 30 pages and 3 home designs, each with its own header. An age gate (21+) greets the first visit.

• Home 01, The Apothecary: a night home with a hero slider and strength card, a lab certificate that fills in line by line as you scroll, the subscribe band, reviews, store pickup times and the journal.
• Home 02, CBD Store: a light header under an amber information bar, a split hero, shop by range, and a hemp leaf that zooms into the cells where CBD is made.
• Home 03, Hemp Shop: a boxed layout with a centred logo, skin care and sweets sections, and a breathing circle that swells as you scroll.

Lab Results, Strength Guide and Store Pickup Pages

These pages carry the real work of a CBD shop. In this Tailwind CSS CBD template, all 18 products in 5 ranges come from one data block, so every card, calculator, certificate and total agrees.

• Strength Guide: milligrams per drop and per serving, with three bands: gentle up to 10 mg, balanced up to 25 mg and strong above.
• Lab Results: a shopper types a batch code and sees CBD against the label, THC against the 0.3 percent limit, and safety panels. A batch over the limit shows as held back. There are 20 certificates in all.
• Product Finder: four questions about format, time of day, strength and flavour score the products.
• Stores and Pickup: 3 stores with open-now lines, weekly hours, maps and live ready times.

Subscriptions, Cart and Checkout

The subscription page suggests a frequency, so a pack never runs out early. Every 4 weeks takes 15 percent off, every 6 weeks 12 percent and every 8 weeks 10 percent. It also lists the next three dispatch days, and a dispatch clock uses a 2:00 pm cut-off.

The cart adds a code field, tax and a shipping meter. Checkout has three steps, with delivery or store pickup. Continue never blocks, and only Place Order checks the fields. Order Tracking and My Account then let customers skip, pause or re-time a subscription.

The remaining pages are Shop, Product, Wishlist, Our Hemp, About Us, Our Team, Team Details, Gallery, Reviews, FAQ with search, Blog, Blog Details, Login, Register, Forgot Password, Contact, Coming Soon and 404.

How Tailwind CSS 4 Works Across These Pages

Each section carries its own styling in its HTML, so the strength card or the lab certificate block can move to another page and look the same. Every element also lists its hover and focus looks right beside its normal look, so a button change happens in one place.

The Tailwind CSS CBD template runs light and dark mode on one switch, and it remembers the choice between visits. Right-to-left layouts cover every page. In addition, two WebGL layers add an aurora behind titles and an oil drop at the footer dropper. Swiper, Fancybox and GSAP with ScrollTrigger handle the sliders, galleries and scroll moments, and the preloader and reveals respect reduced-motion settings.

Changing This Tailwind CSS CBD Template First

Start with the product data block, because it feeds every card, calculator and certificate. Then replace the names, strengths and batch details with your own. After that, swap the logo and the amber and green colours, and check the three store entries.

The download holds the finished pages, which open as they are. It also includes the Tailwind source, so you can rebuild the styles after your edits, and documentation comes with it. Preview photos are left out, and neutral placeholders fill those spots. Font Awesome loads locally, next to the line icons drawn for the template.