Dashboard Example with Tailwind CSS v4 & Hyperscript

This is a simple Dashboard example built with Tailwind CSS v4 and just a little of Hyperscript.

It demonstrates how to create a multi-tenant theming system using CSS variables with Tailwind’s @theme directive.

🚀 Features

This is a pretty simple but functional dashboard example, featuring:

• Tailwind CSS v4 via CDN – no build step required.
• Tenant-based theming – switch between predefined themes (A, B, C).
• Responsive layout – includes both desktop and mobile navigation.
• Dashboard UI – statistics cards, tickets table, and search bar.

📂 Project Structure

.
├── index.html   # Main dashboard example
└── preview.png  # Preview image
└── README.md    # Documentation
└── LICENSE      # License file

🛠️ How to Run

1. Clone this repository:

   git clone https://github.com/your-username/dashboard-tailwind-v4.git
   cd dashboard-tailwind-v4

2. Open the index.html file in your web browser by double-clicking it or using the command line (macOS/Linux):

   open index.html

No build or installation required 🚫📦.

🎨 Theming

Themes are defined in the <style> tag at the top of index.html using CSS variables and Tailwind's @theme directive:

@theme {
  --color-primary: hsl(220 90% 56%);
}

.tenant-a {
  --color-primary: #56d0a0;
}

.tenant-b {
  --color-primary: #ff8a5c;
}

.tenant-c {
  --color-primary: #6f7bff;
}

Switch themes via the dropdown menu in the header (powered by Hyperscript).

Copyright

It is free software, and may be used under the terms specified in the LICENSE file.

Made with ❤️ by Wawandco