Studio — Tailwind Agency Template — Référence de design web et prompt

# STUDIO — TAILWIND PLUS AGENCY TEMPLATE — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "STUDIO" AGENCY TEMPLATE, REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY PAGE, SECTION, HOVER STATE, AND SCROLL/ENTRANCE ANIMATION IS RECREATED FROM RECON ARTIFACTS. ALL ASSETS (THE MONA SANS VARIABLE FONT, EVERY PHOTO, EVERY CLIENT LOGO SVG) ARE VENDORED LOCALLY SO THE CLONE RUNS OFFLINE. THIS IS A STUDY OF SOMEONE ELSE'S DESIGN, BUILT FOR LEARNING — ALL CREDIT FOR THE ORIGINAL GOES TO TAILWIND PLUS (TAILWIND LABS).

REFERENCE: `https://tailwindcss.com/plus/templates/studio/preview`

## SUMMARY

STUDIO IS A PREMIUM "AGENCY / STUDIO" MARKETING TEMPLATE FROM TAILWIND PLUS. IT PRESENTS A FICTIONAL (TONGUE-IN-CHEEK) DANISH DEVELOPMENT STUDIO — "AWARD-WINNING DEVELOPMENT STUDIO BASED IN DENMARK" — ACROSS A BOLD, TYPOGRAPHY-FIRST, LIGHT-ON-WHITE EDITORIAL LAYOUT BUILT AROUND THE MONA SANS VARIABLE TYPEFACE. THE LIVE TEMPLATE IS A NEXT.JS + MDX + FRAMER MOTION APP SERVED FROM `studio.tailwindui.com`; THIS CLONE PRESERVES ITS COMPILED TAILWIND CSS V4.3.1 STYLESHEET (UTILITY CLASSES, OKLCH NEUTRAL RAMP), ITS EXACT RENDERED MARKUP AND COPY, SELF-HOSTS THE MONA SANS WOFF2, VENDORS ALL IMAGERY + CLIENT-LOGO SVGS LOCALLY, AND REPLACES THE NEXT/FRAMER-MOTION RUNTIME WITH A SMALL VANILLA-JS LAYER THAT REIMPLEMENTS THE SAME BEHAVIOURS (EXPANDING NAVIGATION FLYOUT, FADE-IN/FADE-UP ENTRANCE ANIMATIONS, GRID-PATTERN BACKGROUNDS, HOVER STATES, CONTACT FORM).

THE BUILD SPANS 12 PAGES — THE **HOME** PAGE, **ABOUT**, **PROCESS**, THE **WORK** INDEX, THREE WORK **CASE STUDIES** (FAMILYFUND, UNSEAL, PHOBIA), THE **BLOG** INDEX, THREE **BLOG ARTICLES** (FUTURE OF WEB DEVELOPMENT, 3 LESSONS GOING BACK TO THE OFFICE, A SHORT GUIDE TO COMPONENT NAMING), AND **CONTACT**. ALL PAGES SHARE ONE EXPANDING HEADER + ONE FAT FOOTER.