Template-Dashboard-TailwindCSS — HTML 后台模板

SHA-256: 243555f53500fac2d1a6915c449d447edcd94ef6f342475c72ef88668e877db0

2026-10-15T10:13:13.937Z

# Template-Dashboard-TailwindCSS

[English](#english) · [Français](#francais)

<img width="1342" height="881" alt="template-dashboard" src="https://github.com/user-attachments/assets/5bcb6438-4138-4631-a4a9-ca6951d408e7" />

<img width="1647" height="822" alt="template-saas-light" src="https://github.com/user-attachments/assets/224ea81b-166d-410d-bf10-f5bd6812a42d" />

<a id="english"></a>

## English

A dark-first dashboard template built with plain HTML, Tailwind CSS and vanilla JavaScript. Twenty pages, a light and a dark theme, and a chart library written from scratch in SVG. No framework, no dependencies, no build step.

The template is grounded in a fictional product — Vantage, a revenue operations platform — so every page carries real content instead of placeholder boxes. The same company closes the same quarter across all twenty pages.

### Preview

Clone the repository and open `index.html` in a browser. That is the whole setup. Everything is static and every path is relative, so it also runs from GitHub Pages without changes: in Settings → Pages, pick your branch and the `/` root.

### What's inside

Twenty pages, all reachable from the left sidebar and its collapsible dropdowns.

**Workspace** — Dashboard, and dropdowns for Analytics (Reports, Products, Crypto treasury) and Operations (Tasks, Projects, Board, Data table).

**Customers** — Contacts, Companies, Team.

**Account** — Profile, Settings, Integrations, Plans & pricing.

**Template** — Components, Sign in, Sign up, Reset password, 404.

Beyond the pages: a light and dark theme driven entirely by CSS custom properties, seven SVG chart primitives (area, bars, ranked bars, donut, progress ring, sparkline, heatmap) with hover tooltips and crosshairs, a command palette on ⌘K, a drag-and-drop kanban, a sortable and filterable data table with selection and pagination, and forms with inline validation.

The sidebar, top bar and footer are rendered by `assets/js/shell.js` on every page, so navigation is edited in one array rather than in twenty files.

Type is Space Grotesk for display and metrics, Plus Jakarta Sans for reading, JetBrains Mono for data and axis labels. All three load from Google Fonts.

### Before you ship this

The pages load Tailwind from the Play CDN, which compiles utilities in the browser. That is right for a template you can open and edit immediately, and wrong for production — it ships the compiler to every visitor and logs a warning to the console.

Install Tailwind and build a static stylesheet with `npx tailwindcss -i ./assets/css/app.css -o ./assets/css/build.css --minify`, replace the `cdn.tailwindcss.com` script tag with a link to `build.css`, and move the `theme.extend` block out of `assets/js/boot.js` into `tailwind.config.js`. Keep the first four lines of `boot.js` where they are — they apply the stored theme before first paint, which is what prevents a flash of the wrong colours on load.

The dataset in `assets/js/data.js` is fiction. Replace it with your own before anyone reads a number off these charts.

### Customising

Every colour is a CSS custom property declared on `:root` in `assets/css/app.css`, overridden under `.dark`. Change `--brand` and `--brand-2` and the whole template follows, including the logo, the buttons and the gradient rail. Nothing is hard-coded to one theme — the SVG charts reference `var(--c1)` through `var(--c5)`, so switching theme repaints them without a redraw.

The five categorical chart colours are validated against both surfaces for colour-vision-deficiency separation and 3:1 contrast. If you swap them for your own brand, check the replacements rather than trusting the eye.

To change the navigation, edit the `NAV` array at the top of `assets/js/shell.js`. To add a page, copy any existing one, change the `data-page-title` and `data-page-section` attributes on `<body>`, and add an entry to `NAV`.

Open `components.html` first. It shows every token, control and chart the template is built from, in both themes.

<br>

<a id="francais"></a>

## Français

Un template de dashboard sombre par défaut, construit en HTML, Tailwind CSS et JavaScript natif. Vingt pages, un thème clair et un thème sombre, et une librairie de graphiques écrite entièrement en SVG. Aucun framework, aucune dépendance, aucune étape de build.

Le template s'appuie sur un produit fictif — Vantage, une plateforme de revenue operations — pour que chaque page porte du contenu réel plutôt que des blocs de remplissage. La même entreprise clôture le même trimestre sur les vingt pages.

### Aperçu

Clonez le dépôt et ouvrez `index.html` dans un navigateur. C'est toute l'installation. Tout est statique et tous les chemins sont relatifs, donc le template fonctionne aussi sur GitHub Pages sans modification : dans Settings → Pages, choisissez votre branche et la racine `/`.

### Ce qu'il contient

Vingt pages, toutes accessibles depuis le menu latéral gauche et ses dropdowns.

**Workspace** — Dashboard, plus les dropdowns Analytics (Reports, Products, Crypto treasury) et Operations (Tasks, Projects, Board, Data table).

**Customers** — Contacts, Companies, Team.

**Account** — Profile, Settings, Integrations, Plans & pricing.

**Template** — Components, Sign in, Sign up, Reset password, 404.

Au-delà des pages : un thème clair et sombre piloté uniquement par variables CSS, sept primitives de graphiques SVG (aire, barres, barres classées, donut, anneau de progression, sparkline, heatmap) avec tooltips et crosshair au survol, une palette de commandes sur ⌘K, un kanban en glisser-déposer, une table de données triable et filtrable avec sélection et pagination, et des formulaires à validation inline.

Le menu latéral, la barre supérieure et le footer sont générés par `assets/js/shell.js` sur chaque page : la navigation s'édite dans un seul tableau plutôt que dans vingt fichiers.

La typographie associe Space Grotesk pour les titres et les chiffres, Plus Jakarta Sans pour la lecture, JetBrains Mono pour les données et les axes. Les trois se chargent depuis Google Fonts.

### Avant de mettre en ligne

Les pages chargent Tailwind depuis le Play CDN, qui compile les utilitaires dans le navigateur. C'est pratique pour un template qu'on ouvre et modifie immédiatement, et inadapté à la production : le compilateur est envoyé à chaque visiteur et un avertissement s'affiche en console.

Installez Tailwind et compilez une feuille de style statique avec `npx tailwindcss -i ./assets/css/app.css -o ./assets/css/build.css --minify`, remplacez la balise `cdn.tailwindcss.com` par un lien vers `build.css`, et déplacez le bloc `theme.extend` de `assets/js/boot.js` vers `tailwind.config.js`. Laissez les quatre premières lignes de `boot.js` en place : elles appliquent le thème enregistré avant le premier rendu, ce qui évite un flash de couleurs au chargement.

Le jeu de données dans `assets/js/data.js` est fictif. Remplacez-le par le vôtre avant que quiconque lise un chiffre sur ces graphiques.

### Personnaliser

Chaque couleur est une variable CSS déclarée sur `:root` dans `assets/css/app.css`, redéfinie sous `.dark`. Changez `--brand` et `--brand-2` et tout le template suit, logo, boutons et rail dégradé compris. Rien n'est figé sur un seul thème : les graphiques SVG référencent `var(--c1)` à `var(--c5)`, donc basculer le thème les repeint sans les redessiner.

Les cinq couleurs de série sont validées sur les deux fonds pour la séparation en cas de déficience de la vision des couleurs et pour un contraste d'au moins 3:1. Si vous les remplacez par celles de votre marque, vérifiez-les plutôt que de vous fier à l'œil.

Pour modifier la navigation, éditez le tableau `NAV` en haut de `assets/js/shell.js`. Pour ajouter une page, dupliquez-en une, changez les attributs `data-page-title` et `data-page-section` sur `<body>`, et ajoutez une entrée dans `NAV`.

Ouvrez `components.html` en premier. Il présente tous les tokens, contrôles et graphiques qui composent le template, dans les deux thèmes.

<br>

---

Designed by [Studio Alpix](https://studio-alpix.com/). Typefaces from [Google Fonts](https://fonts.google.com).

MIT