![[The AI Show Episode 143]: ChatGPT Revenue Surge, New AGI Timelines, Amazon’s AI Agent, Claude for Education, Model Context Protocol & LLMs Pass the Turing Test](https://www.marketingaiinstitute.com/hubfs/ep%20143%20cover.png)
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.jpg?#)
_ArtemisDiana_Alamy.jpg?#)
 (1).webp?#)
![Yes, the Gemini icon is now bigger and brighter on Android [U]](https://i0.wp.com/9to5google.com/wp-content/uploads/sites/4/2025/02/Gemini-on-Galaxy-S25.jpg?resize=1200%2C628&quality=82&strip=all&ssl=1)
![Apple Vision Pro 2 Allegedly in Production Ahead of 2025 Launch [Rumor]](https://www.iclarified.com/images/news/96965/96965/96965-640.jpg)
![New iOS 19 Leak Allegedly Reveals Updated Icons, Floating Tab Bar, More [Video]](https://www.iclarified.com/images/news/96958/96958/96958-640.jpg)
Building a financial dashboard with HTML5, TailwindCSS v4, and Vanilla JavaScript
Introduction While developing the Financial data analyzer series, a dashboard became necessary for presenting the analyzed data intuitively and visually appealingly. Although I'm not a UI/UX designer, I appreciate well-designed interfaces with modern visual cues. This article details my process of creating such a dashboard from scratch with TailwindCSS v4 without using external frameworks. Prerequisite This article assumes you're familiar with HTML5, CSS3, and JavaScript (ES syntax). Familiarity with TailwindCSS is also helpful. I'll present two ways to set up your development environment for working with TailwindCSS from scratch, without external frameworks. Setup for Tailwind CSS v4 for Node.js users To get started with Tailwind CSS v4 for your dashboard project using Node.js, follow these steps: Create your project directory (e.g., finance-dashboard) and navigate into it: mkdir finance-dashboard cd finance-dashboard Install Tailwind CSS, the Tailwind CSS CLI, and the @tailwindcss/forms plugin as development dependencies: npm install -D tailwindcss @tailwindcss/cli @tailwindcss/forms Create an input CSS file (e.g., assets/css/input.css) and add the following: @import "tailwindcss"; @plugin "@tailwindcss/forms"; @custom-variant dark (&:where(.dark, .dark *)); @layer base { html { scroll-behavior: smooth; } body { overflow-y: scroll; font-family: "Fira Sans", sans-serif; } input[type], textarea, select { @apply appearance-none border-none ring-0 outline-hidden; &:focus { @apply border-none ring-0 outline-hidden; } &:focus-visible { @apply border-none ring-0 outline-hidden; } } button { @apply cursor-pointer; } } This CSS file imports Tailwind CSS, registers the @tailwindcss/forms plugin and sets up a custom dark variant for enabling dark mode via CSS classes. It also includes basic styling for smooth scrolling, font family, and form elements. Note: TailwindCSS v4 We are using strictly TailwindCSS v4 here hence we ditched tailwind.config.[j|t]s file. You can read more in my v3 to v4 migration guide with plugins. Create your main HTML file (e.g., index.html) with the following structure: Dashboard | John Owolabi Idogun This is a basic HTML structure that includes Google Fonts, ApexCharts (for placeholder charts), and links to your compiled CSS and JavaScript files. The body includes classes for light and dark modes. Generate the compiled CSS file, assets/css/style.css: npx tailwindcss -i ./assets/css/input.css -o ./assets/css/style.css --watch --minify Tailwind CSS v4 Setup without Node.js For those who prefer not to use Node.js, you can use TailwindCSS's Standalone CLI. Follow the guide to install it based on your operating system. Then, complete steps 1, 3, and 4 from the Node.js setup, skipping steps 2 and 5. To compile your CSS, run: ./tailwindcss -i input.css -o output.css --watch --minify This setup provides a foundation for building the dashboard with Tailwind CSS v4, utilizing vanilla JavaScript for interactivity and ApexCharts for data visualization. Source code Sirneij / finance-dashboard An aesthetic personal finance dashboard built with vanilla JS, tailwindcss v4 and HTML5 Finance Dashboard A responsive financial dashboard built with HTML, Tailwind CSS v4, and vanilla JavaScript. Features Responsive Design: Adapts seamlessly between mobile and desktop views Collapsible Sidebar: Full-width and compact viewing options Dark Mode Support: Automatic system theme detection with manual toggle Real-time Data Visualization: Using ApexCharts for financial data display Mobile-First Approach: Optimized for all screen sizes Project Structure finance-dashboard/ ' ├── README ├── assets │ ├── css │ │ ├── input.css │ │ └── style.css │ ├── images │ │ ├── favicons │ │ │ ├── apple-touch-icon.png │ │ │ ├── favicon-96x96.png │ │ │ ├── favicon.ico │ │ │ ├── favicon.svg │ │ │ ├── site.webmanifest │ │ │ ├── web-app-manifest-192x192.png │ │ │ └── web-app-manifest-512x512.png │ │ ├── logo-small.svg │ │ └── logo.svg │ └── js │ ├── app.js │ └── index.charts.js ├── index.html ├── package-lock.json ├── package.json └── pages ├── behavior.html └── transactions.html Getting Started… View on GitHub Implementation Step 1: Header and Sidebar First off, we will build out the header and sidebar of the dashboard. Let's add this to the body of the page: Overview
Introduction
While developing the Financial data analyzer series, a dashboard became necessary for presenting the analyzed data intuitively and visually appealingly. Although I'm not a UI/UX designer, I appreciate well-designed interfaces with modern visual cues. This article details my process of creating such a dashboard from scratch with TailwindCSS v4 without using external frameworks.
Prerequisite
This article assumes you're familiar with HTML5, CSS3, and JavaScript (ES syntax). Familiarity with TailwindCSS is also helpful.
I'll present two ways to set up your development environment for working with TailwindCSS from scratch, without external frameworks.
Setup for Tailwind CSS v4 for Node.js users
To get started with Tailwind CSS v4 for your dashboard project using Node.js, follow these steps:
-
Create your project directory (e.g.,
finance-dashboard) and navigate into it:
mkdir finance-dashboard cd finance-dashboard -
Install Tailwind CSS, the Tailwind CSS CLI, and the
@tailwindcss/formsplugin as development dependencies:
npm install -D tailwindcss @tailwindcss/cli @tailwindcss/forms -
Create an input CSS file (e.g.,
assets/css/input.css) and add the following:
@import "tailwindcss"; @plugin "@tailwindcss/forms"; @custom-variant dark (&:where(.dark, .dark *)); @layer base { html { scroll-behavior: smooth; } body { overflow-y: scroll; font-family: "Fira Sans", sans-serif; } input[type], textarea, select { @apply appearance-none border-none ring-0 outline-hidden; &:focus { @apply border-none ring-0 outline-hidden; } &:focus-visible { @apply border-none ring-0 outline-hidden; } } button { @apply cursor-pointer; } }This CSS file imports Tailwind CSS, registers the
@tailwindcss/formsplugin and sets up a customdarkvariant for enabling dark mode via CSS classes. It also includes basic styling for smooth scrolling, font family, and form elements. Note: TailwindCSS v4We are using strictly TailwindCSS v4 here hence we ditched
tailwind.config.[j|t]sfile. You can read more in my v3 to v4 migration guide with plugins. -
Create your main HTML file (e.g.,
index.html) with the following structure:
</span>Dashboard | John Owolabi Idogun<span class="nt">