Compass — Editorial Course Platform — Référence de design web et prompt

# COMPASS — TAILWIND PLUS COURSE / PERSONAL-WEBSITE TEMPLATE — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "COMPASS" COURSE TEMPLATE, REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY PAGE, SECTION, HOVER STATE, AND SCROLL/ENTRANCE BEHAVIOUR IS RECREATED FROM RECON ARTIFACTS. ALL ASSETS (FONTS, IMAGES, VIDEO POSTERS, LESSON CLIPS) 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/compass/preview`

## SUMMARY

COMPASS IS A PREMIUM "ONLINE COURSE" / PERSONAL-WEBSITE TEMPLATE FROM TAILWIND PLUS. IT PRESENTS A FICTIONAL SELF-HELP COURSE ("A COMPREHENSIVE JOURNEY THAT HELPS YOU NAVIGATE UNCERTAINTY AND MAKE CHOICES ALIGNED WITH YOUR VALUES AND GOALS") AS A LIGHT, EDITORIAL, TYPOGRAPHY-FIRST READING EXPERIENCE. THE LIVE TEMPLATE IS A NEXT.JS APP SERVED FROM `compass.tailwindui.com`; THIS CLONE PRESERVES ITS COMPILED TAILWIND CSS V4 STYLESHEET (OBFUSCATED UTILITY CLASSES, OKLCH GRAY RAMP) AND ITS EXACT RENDERED MARKUP, SELF-HOSTS THE INTER + GEIST MONO FONTS, VENDORS ALL IMAGERY/VIDEO LOCALLY, AND REPLACES THE PROPRIETARY HEADLESS-UI + NEXT RUNTIME WITH A SMALL VANILLA-JS SHIM THAT REIMPLEMENTS THE SAME BEHAVIOURS (SIDEBAR COLLAPSE, MOBILE MENU, ACCOUNT DROPDOWN MENU, SCROLL-SPY TABLE OF CONTENTS, HOVER/FOCUS `data-*` STATES, NATIVE VIDEO PLAYBACK).

THE BUILD SPANS 29 PAGES — THE COURSE **OVERVIEW** HOME, 20 LESSON **ARTICLE** PAGES (ALL SHARING ONE ARTICLE LAYOUT, EACH WITH ITS OWN VIDEO + PROSE + TABLE OF CONTENTS), AN **INTERVIEWS** GRID, 6 INDIVIDUAL **INTERVIEW DETAIL** PAGES (ONE PER GUEST, EACH WITH A PORTRAIT VIDEO + Q&A PROSE + SCROLL-SPY TOC), AND A **RESOURCES** PAGE.