Maisona — Tailwind CSS Fashion Designer Template (HTML)

About This Item

Collections twice a year, a runway film, stockists and made-to-order pieces all fit on one site with Maisona, a Tailwind CSS fashion designer template for a designer fashion house. Tailwind CSS 4 handles the styling, and the design keeps its dark, moody look: a black ground, white Montserrat capitals and house names in Gloock.

Three Fashion House Home Pages: House, Runway and Archive

• The House: a full-screen slider, the season’s looks in a mosaic and Season Shuffle for the collections. Made-to-order pieces then appear with their ready dates.
• The Runway: a three-card slider of the latest show, a Runway Film that advances frame by frame as you scroll, and a countdown to the next show.
• The Archive: a side menu, a split slider and ten years of looks in a masonry of twelve frames. A size finder with its chart comes after that.

Collections, Lookbook and Made-To-Order Pages

The collection archive lists 22 seasons, so visitors filter by autumn / winter or spring / summer and search by name or year. A collection page then shows its 16 looks, and the lookbook gives every piece a price and a ready date.

Made To Order holds 17 pieces that visitors filter by kind, season, price and lead time. This Tailwind CSS fashion designer template prices each piece by cloth, size and length, because the atelier cuts every piece again to order. There are 12 cloths, each with its weeks, and sizes run FR 34-46 with IT, UK and US.

• Private Appointments: five kinds at three ateliers, each in its own time zone, with your own time shown beside theirs.
• Stockists: 12 stockists in 9 cities, each open or closed by its own clock, with city tabs, search and a Google map.
• Bag and Checkout: five shipping zones, French VAT, a coupon and a deposit today with the balance before dispatch.

Thirty Pages in This Tailwind CSS Fashion Designer Template

• Collections and shows: Collections, Nocturne AW26, The Lookbook, The Runway Film and The Archive.
• Atelier and ordering: The Atelier, Private Appointments, Size Guide, Made To Order, Piece Details, Your Bag, Checkout, Wishlist and Stockists.
• The house: About The House, The Studio, Journal, Journal Details, FAQ with search and Contact with a map.
• Accounts and utility: Profile, My Account, Login, Register, plus Forgot Password, a Coming Soon page and a 404 page.

Add the 3 home pages and the total reaches thirty. A euro, pound and dollar switch also repaints every price.

Why Tailwind CSS 4 Fits the Lookbook and Checkout Pages

The built stylesheet carries every class these 30 pages use and nothing else, so unused styles stay out. Each hover and focus state is written in the markup beside its base style. For example, you can read the look-number hover on a lookbook image in one place.

Changes to Make Before Launch

Start with the data. A single data block holds the made-to-order prices, ready dates, stockist time zones, the appointment diary and the bag totals, so edit that before anything else. Then swap the house name, collections, cloths and stockists for your own.

The finished pages open as downloaded. Tailwind source files are also in the folder, and you recompile the CSS after changing classes. Neutral placeholders replace the preview photography, so your own lookbook images go in next. Documentation comes with it, and the icons use Font Awesome.

The template includes a dark theme, a paper light theme and right-to-left support for every page. WebGL light slits take their tint from the theme colours.