Azurea — Tailwind CSS Swimwear Template (HTML)

About This Item

Selling swimwear online means sizing a top and a bottom separately, and Azurea is built around that. This Tailwind CSS swimwear template suits resortwear and swim labels that sell bikini tops and bottoms, one-pieces, linen, cover-ups, hats, towels and totes. Its markup is written for Tailwind CSS 4, and it includes 32 pages with 3 home page designs.

Home and Shop Pages in This Tailwind CSS Swimwear Template

Each home page sells the label in a different way, and each has its own header.

• Home 01, The Swim Shop: a hero slider, shop by piece, a Mix & Match section where tops and bottoms cycle on one plate, filter tabs, and the fit finder in one row.
• Home 02, The Resort Edit: a collage hero for each destination, three priced looks, gift cards and the boutiques open now.
• Home 03, Summer Pre-Order: a sea hero with a live countdown, the drops on a timeline and the pre-order questions.

The shop lists 26 pieces. Shoppers can filter by size in stock, colour, destination, UPF and price, and then sort by price, UPF or rating. Product pages show 62 drawn packshots across 10 colours, and sold-out sizes appear struck through.

Swim Fit Finder, Mix & Match and Size Guide

The Swim Fit Finder works in three steps. First it asks for underbust and bust, then waist, hips and preferred coverage, and then it shows tops and bottoms that are in stock in those sizes. The shop remembers the sizes afterwards, so a buyer does not repeat them.

Mix & Match lets a shopper pick any top and any bottom in separate colours and sizes. The set price appears on one plate, and the cart pairs tops with bottoms automatically. A Size Guide page adds underbust, waist and hip charts, cup fits and coverages. A label that sizes tops and bottoms apart gets real use from this Tailwind CSS swimwear template.

Summer Pre-Order, Fabric & UPF and Gift Cards

• Summer Pre-Order: 3 drops, each with a Monday ship date, a closing day and a deposit worked out per piece.
• Fabric & UPF: 8 fabrics compared by UPF, chlorine life and drying time, plus a UV calculator.
• Gift Cards: a three-step wizard with a live preview.
• Boutiques: 3 boutiques with open-now lines, weekly hours and ready times for pickup.

Cart and Checkout cover the set price, a promo code, tax and the pre-order balance. Checkout has three steps with delivery or boutique pickup. The template also includes Wishlist, Order Tracking, My Account, Lookbook, Reviews, FAQ, Blog, Contact, Coming Soon and 404.

Product Card and Cart Styling in Tailwind CSS 4

Each element carries its own styling as classes written right on it. A product card, a fit finder step or a cart line can therefore be changed in the spot where it appears. The compiled stylesheet holds only the styles those pages call for, so unused rules stay out of it.

The finished pages open directly in a browser. The zip also contains the Tailwind source, so you can change it and run a build to regenerate the styles. Photos from the preview are not shipped, and plain placeholder images fill those spots. Documentation comes with it.

Colours, Sizes and Boutiques to Change First

Start with the placeholders, since they stand where your own photography goes. Next, replace the 26 products, sizes, fabrics, drops and boutiques, which all come from one data block, so cards, charts and totals stay in agreement. Then adjust the white, sky blue and apricot palette and the Unbounded and Heebo fonts to match your label.

Light and dark mode, right-to-left layouts, Swiper sliders, Fancybox galleries and Font Awesome icons are already in place. The dispatch clock uses a 2:00 pm cut-off.