Catalyst — Event Management Dashboard — Référence de design web et prompt

# CATALYST — TAILWIND PLUS APPLICATION UI KIT DEMO — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "CATALYST" APPLICATION UI KIT DEMO (THE FICTIONAL EVENT-MANAGEMENT ADMIN APP), REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY ROUTE, EVERY PANEL, EVERY HOVER STATE, THE ACCOUNT + TEAM DROPDOWN MENUS, THE MOBILE SLIDE-IN SIDEBAR, AND THE LIGHT/DARK COLOR SCHEMES ARE RECREATED FROM RECON ARTIFACTS. THE COMPILED TAILWIND V4 STYLESHEET IS PRESERVED AND THE INTER VARIABLE FONT, EVERY EVENT PHOTO, THE TEAM LOGO, THE USER AVATAR, AND THE COUNTRY FLAG 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://catalyst-demo.tailwindui.com`

## SUMMARY

CATALYST IS TAILWIND PLUS'S MODERN REACT/UI APPLICATION KIT. ITS PUBLIC DEMO IS A FICTIONAL EVENT-TICKETING ADMIN DASHBOARD FOR AN ORGANIZATION CALLED "CATALYST", SIGNED IN AS "ERICA". THE LIVE TEMPLATE IS A NEXT.JS + HEADLESS UI + TAILWIND V4 APP SERVED FROM `catalyst-demo.tailwindui.com`; THIS CLONE PRESERVES ITS COMPILED TAILWIND CSS (UTILITY CLASSES, ZINC NEUTRAL RAMP IN OKLCH/LAB, BLUE-500 FOCUS ACCENT, BUILT-IN DARK MODE), ITS EXACT RENDERED MARKUP AND COPY, SELF-HOSTS THE INTER VARIABLE WOFF2, VENDORS ALL IMAGERY LOCALLY, AND REPLACES THE NEXT/HEADLESS-UI RUNTIME WITH A SMALL VANILLA-JS LAYER THAT REIMPLEMENTS THE SAME BEHAVIOURS (ACCOUNT DROPDOWN, TEAM SWITCHER DROPDOWN, MOBILE SLIDE-IN SIDEBAR WITH BACKDROP, DARK-MODE TOGGLE VIA `prefers-color-scheme`, KEYBOARD/OUTSIDE-CLICK DISMISS).

THE BUILD SPANS 37 PAGES THAT FALL INTO TWO LAYOUT FAMILIES — THE **SIDEBAR APPLICATION LAYOUT** (FIXED 16REM SIDEBAR, ROUNDED WHITE CONTENT PANEL ON A ZINC-100 PAGE, MOBILE TOP NAVBAR) USED BY: THE **HOME** DASHBOARD, **EVENTS** INDEX, FOUR **EVENT DETAIL** PAGES (1000–1003), **ORDERS** INDEX, TWENTY-SIX **ORDER DETAIL** PAGES (3000–3025), AND **SETTINGS**; PLUS THE **CENTERED AUTH LAYOUT** (NO SIDEBAR, CARD ON A ZINC-50/WHITE GRADIENT FIELD) USED BY: **LOGIN**, **REGISTER**, AND **FORGOT PASSWORD**.