Nocturna gives bar owners a moody, animated site that also does real work: showing a menu, scaling recipes and taking table bookings. It is a Tailwind CSS cocktail bar template with 30 pages for lounges, speakeasies and aperitivo gardens, and it uses Tailwind CSS 4 for all of its styling.

Tailwind CSS Cocktail Bar Template Built Around Real Bar Logic

Each page of this Tailwind CSS cocktail bar template follows how a bar actually runs, from the happy-hour clock to the table booking. The bar clock knows when happy hour starts and when last call comes. Every drink’s strength is worked out from its own recipe, so the numbers stay honest when you change an ingredient.

• An age gate opens once for each visitor and points under-age guests to the zero-proof list.
• Night and day mode sits on one switch and is remembered between visits, with no flash on load.
• Right-to-left stylesheets and a language picker turn any page around.
• WebGL layers add a neon haze and a humming neon sign in the footer, tinted by the theme colours.
• A blend-mode cursor inverts the large serif words, and prefers-reduced-motion is supported.

Cocktail Lounge, Aperitivo Garden and Speakeasy Home Pages

Home 01, Cocktail Lounge, has a hero slider, a quick table booking and upcoming events. Its Dusk To Night scene fades the sky into night while the clock runs from happy hour to last call.

Home 02, Aperitivo Garden, shows the garden in daylight with long drinks and the club. In The Pour, the signature drink builds in a tall glass, one ingredient at a time.

Home 03, Late-Night Speakeasy, is open till three and shows the bar in photographs. When the page leaves the hero, the photographs pull back to their full frame.

Cocktail Menu, Recipes and Table Booking Pages

• Cocktail Menu: spirit tabs, flavour, vegan and zero-proof checks, a strength ceiling, search and sort.
• Recipes: each drink scales from one to eight servings, in millilitres or fluid ounces, and shows the pure alcohol for the batch.
• Book A Table: four steps covering the party and the night, a time with tables free, a room with its minimum spend and deposit, then your details.
• Private Events: an estimate that adds the drinks package per guest, extra hours, room hire, extras, service and tax.
• Masterclasses: the next six sessions with seats left, and a booking that checks the guests fit.
• Events: tonight’s night marked as on now, starting at, or done, plus special events dated from today.
• Shop & Gift Cards: a bag and wishlist for the whole site, and a gift card whose face follows every choice.

The remaining pages are About Us, Our Bartenders, Bartender Profile, Cocktail Details, Event Details, Product Details, Cart, Checkout, Wishlist, Gallery, FAQ, Journal and Journal Post. Contact Us, Login, Register, a password reset page, Coming Soon and 404 complete the set. The contact form works out of the box, and invisible reCAPTCHA v3 can be switched on when you want it.

How Tailwind CSS 4 Styles the Menu and Booking Pages

Each section’s look is set by utility classes placed directly in the markup, so a change happens on the element you are already reading. Hover and focus styles live beside the default styles on the same element. For example, a menu filter button or a booking step keeps its active look in the line you edit.

Edits a Bar Owner Would Make First

Most owners start with the drink list, the opening hours that feed the bar clock, and the room names and deposits in the booking steps. Because the bar logic comes from one data block, happy-hour prices, drink strength and standard drinks update together after a single edit. Then comes the colour theme, which also tints the WebGL neon layers.

The ready-made pages open straight away, and the Tailwind source is included so you can 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 the code is well commented throughout.

Every page is fully responsive and runs with zero console errors.