Doodlia — Tailwind CSS Illustrator Portfolio Template (HTML)

About This Item

A solo illustrator or character designer who sells commissions, prints, tees and stickers gets a ready layout from Doodlia, a Tailwind CSS illustrator portfolio template. It is built with Tailwind CSS 4. It has a loud black look, white hairline frames, and a mascot named Doodle drawn in many poses.

It includes 32 pages, and it also has 3 different home page designs. The preview artwork is not in the download, so plain placeholders stand in until your own drawings go in.

Which Doodlia Pages Matter Most for Commissions

Illustrators earn from clients who know what they want to pay, so these pages carry that work:

• Commission Builder: you choose characters, framing, style, usage, turnaround and extras. Then the quote, deposit and delivery date change as you go.
• Request A Commission: a five-step form with the brief, style and usage, references with an upload, your details and a summary. It also opens with the quote the client built.
• Rates & Usage: prices by framing and style, plus usage licences, rush and express options, and extras.
• How It Works: the five steps, plus the sketch developing on scroll.

Because the quote, deposit and delivery date come from the month’s commission queue, a client sees a real date before writing.

Tailwind CSS Illustrator Portfolio Template With a Commission Builder

This Tailwind CSS illustrator portfolio template covers 32 pages, so the portfolio, the commission process and the shop share one design. Color, font and spacing choices live in a single Tailwind theme, so editing one value updates every page.

Each section carries its styling as utility classes right in the markup, so you can read and change its look in place. Hover and focus styling also sits in the markup, beside the base styles. For example, a card on The Series page can change without another file. For example, you can adjust a card on The Series page without searching another file.

Three Home Pages for a Studio, a Shop or Commissions

• Home 01, The Studio: a sticker masthead slider, work by series with tabs, a turnaround sheet that turns Doodle as you scroll, the shop, client quotes, fairs and process notes.
• Home 02, The Shop: a split hero for prints, tees and stickers, new items with sizes on each card, and a sketch that develops on scroll. Then come a sticker club and shipping answers.
• Home 03, Commissions: a slider of titles with character stickers, the live queue and starting prices. Then come the six series as a word list and the rates on framed cards.

Illustration Work Pages and Series

All Work lists every piece with series tabs and search. Then The Series gives each of the six series its own band. Piece Details and Piece Details 02 offer two layouts, and each also shows the products made from the piece. Also included are About, The Studio, Team Profile, What I Draw, Character Design, Process Notes and Note Details.

Prints, Tees and Stickers Shop Pages

The Shop filters by kind, price ceiling, sort and search. Art Print offers A4, A3 and A2, and T-Shirt runs from S to XXL, each with quantity, line total and a size guide. Bag, Checkout and Wishlist handle sizes, shipping zones, a free-shipping meter, a coupon and sales tax. In addition,

Account and utility pages round it out: FAQ with search, Contact with a working form and map, My Account, Login, Register, Forgot Password, Coming Soon and 404.

Themes, Motion and Download Contents

The template has a black theme and a light theme on a smiley switch, and the choice is remembered between visits. Right-to-left support covers every page, and a flag picker turns a page around. A WebGL Riso Grain, a pencil cursor, a Mascot Wave preloader and three scroll moments add motion. Also, prefers-reduced-motion is supported. Swiper sliders, Fancybox video popups and a lightbox gallery are included, with Font Awesome Free, illustrated icons and the mascot. Fonts are Kanit and Roboto Mono.

The finished pages open as they are. The download also holds the Tailwind source, so you can edit and rebuild the styles, plus documentation. The contact form handler can also use optional invisible reCAPTCHA v3.