Finelia — Tailwind CSS Tattoo Template (HTML)

About This Item

Fine-line tattoo and piercing studios get a ready site in Finelia, a Tailwind CSS tattoo template written for Tailwind CSS 4. It suits single-needle linework, small symbols, botanicals and considered piercing. So the pages talk about that work from the first screen.

Fine-Line Studio Pages in This Tailwind CSS Tattoo Template

This Tailwind CSS tattoo template prices piercings by placement, jewellery style and metal, and estimates a fine-line piece from its size in centimetres. The look is light and minimal. White and porcelain grounds carry one violet accent, and gold appears only where there is metal. Headings use Crimson Text with an italic accent word, over Barlow body text.

Three Tattoo Studio Home Pages

• The Studio: a full-screen slider, four services, edge-to-edge work, artists and reviews. It also has a studio film and a contact form with a map.
• Piercing and Jewellery: three curated ears with jewellery and prices. The menu runs by ear, face and body, and the jewellery comes in three metals.
• Fine Line: one piece per screen and a mosaic of work by style. Sizes show to scale with a live estimate, then come the four artists and the journal.

Tattoo Estimate, Piercing Menu and Booking Pages

These pages do the daily work of a studio, so a visitor can plan a visit before writing to you.

• Piercing Menu: 18 placements with gauge, healing time and youngest age. Pick a jewellery style and a metal, and the panel prices the piercing and the piece.
• Tattoo Estimate: width and height, line style, ink, 10 placements and the artist’s rate give a price range, hours, sittings and a deposit. The tool also draws the piece to scale on a centimetre grid.
• Book A Visit: six steps, from the visit and artist to ID and age, then confirm. Age on the day decides the rules, and piercing under 18 needs a parent.
• Aftercare: choose the piercing and the date, then see the healing stage, the downsize date and the routine for that area.
• Ear Curation: tap a drawn ear to add placements, styles and metals. Then see the whole ear priced, with a plan of visits.

Jewellery Shop and Other Pages

The shop lists 16 pieces plus an aftercare range. Metal swatches swap the photograph and the price. The shop also has filters, sorting, search, a bag, a coupon, a shipping meter, checkout and a wishlist. A pound, dollar and euro switch repaints every price.

Thirty-one pages come in total. They include Fine-Line Tattoos, Our Artists, Artist Profile, Helix Piercing, Gallery, two Project Details pages, Product Details, Cart, About Us, Journal, FAQ with search, Contact and My Account. The account area covers Login, Register and password recovery, and the set ends with a Coming Soon page and a 404 page.

Breakpoints and Hover States in the Finelia Markup

Layouts adapt to the screen with mobile-first breakpoint prefixes written into the markup. So the Piercing Menu panel and the shop grid reflow on phones without a separate stylesheet to chase. Hover and focus states also appear beside the default classes on each element. That makes the jewel glint on product cards easy to find and adjust.

Themes, Motion and Language Support

• A white theme by default and a dark theme on one switch, which the site remembers between visits.
• Right-to-left support on every page, with a flag language picker.
• A WebGL silk thread tinted by the theme colours, and a gold hoop on a chain in the footer.
• Swiper sliders, Fancybox video popups and a lightbox gallery.
• Reduced-motion support for visitors who prefer less movement.

What a Studio Would Change First

Most owners start with the data block that holds piercing prices, estimate rates, age rules and healing dates. Those must match the real studio. Next come the artist profiles, the jewellery list and the accent colours for both themes. The contact page includes a working form script, and you can switch on invisible reCAPTCHA v3.

You can open the built pages straight away. The download also contains the Tailwind source, so you can edit and rebuild the styles. Neutral placeholders replace the preview images, so you add your own artwork. Documentation is included. Font Awesome Free loads locally, and the fonts are Crimson Text and Barlow.