Hopstead — Tailwind CSS Craft Beer Template (HTML)

About This Item

Breweries, taprooms, brewpubs and beer brands get a ready site in Hopstead, a Tailwind CSS craft beer template built on Tailwind CSS 4. Twelve hand-drawn cartoon cans, starburst stickers and a hairline grid give it a small-batch label look.

Tailwind CSS Craft Beer Template With Taproom and Tour Booking

The Tailwind CSS craft beer template ships with 30 pages, so a brewery can launch with a beer list, taproom, tours, events and a shop. Three home page designs give you different starting points.

• Home 01 – Craft Beer: a split hero with a can slider. In Know Your Pour, the ABV and IBU dials of four flagship beers sweep to their figures as you scroll. A pointer spotlight follows you beside the live tap board.
• Home 02 – Brewery: a left rail menu, a photo hero slider and six fresh cans with canning dates. A Step By Step section covers mill, mash, boil, ferment, condition and can, and the page ends with two sites showing live hours.
• Home 03 – Beer Showcase: a full-screen can showcase whose colour changes with every beer. In From Lager To Stout, the ground shifts from pilsner gold to imperial stout black by each style’s SRM colour.

Beer Finder, Beer Details and Mix A Case

Our Beers filters by family, strength and bitterness, and it also searches names, hops and malts.

Beer Details holds a spec sheet with ABV and IBU dials, hops, malts and pairing. Pack choices reprice, and the live pint price comes from the taproom.

Mix A Case lets visitors fill twelve or twenty-four cans. Steppers never overfill the case, and the case price and price per can update live.

Taproom Board, Brewery Tours and Events

• Taproom: shows when you are open and until when, with kitchen and happy hour status. Every tap lists taster, half and pint prices. A four-glass flight builder and a table request with the day’s real times complete it.
• Brewery Tours: three tours and a four-step booking with a live total. Visitors pick a tour, a day and time with seats left, guests, extras and details. Designated drivers pay their own rate, and only Confirm checks the details.
• Events: each event follows its own repeat rule: weekly, the nth weekday of the month, or once. A month calendar and ticket reservations capped by places left sit alongside.

Hop Club, Stockists and Shop Pages

Hop Club offers three plans repriced by monthly, quarterly or yearly billing, plus a comparison table. Where To Buy filters stockists by city and kind of place, and it includes a wholesale request form.

The Shop covers 4-packs and mixed packs with filters, sort and search. It adds a product page, bag, coupon, free-shipping meter, tax, checkout with an order number and a wishlist.

The remaining pages are Event Details, Gallery, About, Our Brewers, Brewer Profile, FAQ, Blog, Blog Details, Cart, Login, Register, Forgot Password, Contact, Coming Soon and 404. Contact has a working form and a map.

What Tailwind CSS 4 Changes for Hopstead Pages

A section’s styling travels with its HTML, so you can copy a block to another page and it keeps its look. For example, the tap board from the Taproom page can move to a home page without extra stylesheet work. Hover and focus states are written in the markup next to the base styles, so you see how a button behaves where it is defined.

The template also has light and dark mode on one switch, remembered between visits. Right-to-left layouts work on every page, and an age check appears on the first visit.

Cans, Prices and Hours to Edit Before Launch

Most buyers start with the cans, the beer names and the taproom hours. The twelve drawn cans and four mixed packs carry their own labels, so you swap in your beers and keep the layout. After that, set your pint prices, tour times and Hop Club plans.

The finished pages open as they are. The Tailwind source is included for anyone who wants to edit and rebuild the styles. The images shown in the preview stay out of the download, and neutral placeholders take their place. Documentation is included, and Font Awesome Free loads locally.