Protocol — API Documentation Template — Référence de design web et prompt

# PROTOCOL — TAILWIND PLUS API DOCUMENTATION TEMPLATE — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "PROTOCOL" API-DOCUMENTATION 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, COMPILED STYLESHEET, ICONS) 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/protocol/preview`

## SUMMARY

PROTOCOL IS A PREMIUM API-REFERENCE / DEVELOPER-DOCUMENTATION TEMPLATE FROM TAILWIND PLUS. IT PRESENTS A FICTIONAL MESSAGING-PLATFORM API ("USE THE PROTOCOL API TO ACCESS CONTACTS, CONVERSATIONS, GROUP MESSAGES, AND MORE") AS A CLASSIC THREE-ZONE DOCS LAYOUT: A FIXED LEFT SIDEBAR NAVIGATION (GUIDES + RESOURCES SECTIONS WITH AN ANIMATED ACTIVE-LINK HIGHLIGHT), A STICKY FROSTED TOP BAR (LOGO, COMMAND-K SEARCH PILL, TOP NAV, THEME TOGGLE, SIGN-IN BUTTON), AND A CENTERED `prose` CONTENT COLUMN. RESOURCE PAGES SPLIT INTO A TWO-COLUMN BODY: PROSE DOCS ON THE LEFT AND STICKY DARK CODE PANELS (TABBED cURL / JAVASCRIPT / PYTHON / PHP REQUEST + RESPONSE SAMPLES) ON THE RIGHT.

THE LIVE TEMPLATE IS A NEXT.JS APP SERVED FROM `protocol.tailwindui.com`. THIS CLONE PRESERVES ITS COMPILED TAILWIND CSS V4 STYLESHEET (OBFUSCATED UTILITY CLASSES, OKLCH ZINC RAMP, EMERALD ACCENT) AND ITS EXACT RENDERED MARKUP, SELF-HOSTS ITS FONTS, AND REPLACES THE PROPRIETARY HEADLESS-UI + NEXT + FRAMER-MOTION RUNTIME WITH A SMALL VANILLA-JS SHIM THAT REIMPLEMENTS THE SAME BEHAVIOURS (THEME TOGGLE WITH `localStorage`, MOBILE NAV DRAWER, SEARCH-MODAL OVERLAY, SIDEBAR SCROLL-SPY WITH THE SLIDING HIGHLIGHT PILL, ON-THIS-PAGE TOC, CODE-PANEL TABS, COPY-BUTTON, "WAS THIS PAGE HELPFUL?" TOGGLE).