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: The shell code below is 2 lines.

Install Tailwind CSS, the Tailwind CSS CLI, and the at tailwindcss slash forms plugin as development dependencies: The shell code below is 1 line.

Create an input CSS file (e.g., assets slash css slash input dot css) and add the following:

This CSS file imports Tailwind CSS, registers the at tailwindcss slash 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.

The CSS code below is 33 lines, from assets slash css slash input dot css. Note: TailwindCSS v4

We are using strictly TailwindCSS v4 here hence we ditched tailwind dot config j pipe t s file. You can read more in my v3 to v4 migration guide with plugins.

Create your main HTML file (e.g., index dot html) with the following structure: The HTML code below is 24 lines, from index dot html.

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 slash css slash style dot css: The shell code below is 1 line.

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: The shell code below is 1 line.

This setup provides a foundation for building the dashboard with Tailwind CSS v4, utilizing vanilla JavaScript for interactivity and ApexCharts for data visualization.

Live version

Source code Sirneij/finance-dashboard

An aesthetic personal finance dashboard built with vanilla JS, tailwindcss v4 and HTML5 html5 javascript css3

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: The HTML code below is 163 lines.

The entire page is meant to take the height of the screen (h screen). This ensures the page remains in view. The sidebar inherits this property. It contains both icons and labels. We'll use both so that when the sidebar is fully open, both are visible, but when it's collapsed, only the icons are displayed.

Next, we will add the main content markup: The HTML code below is 82 lines.

At the top, we have the header with the "Dashboard" inscription. It also houses the icons that toggle light/dark modes. The main page takes the remaining height available on the page (h calc of 100vh-4rem) and allows vertical scrolling in case of overflow (overflow y auto).

The remaining markups are easy to follow, so we won't paste them here. You can always visit the project's repo to copy them. They look like this for now:

We'll proceed to write the theme-switching logic and responsive triggers.

Step 2: Responsive triggers and Theme Switching logic

Make your assets slash js slash app dot js look like this: The JavaScript code below defines Sidebar Controller, 171 lines, from assets slash js slash app dot js.

This JavaScript code sets up the responsive sidebar and theme-switching logic for the dashboard. Sidebar Controller handles the sidebar's behavior on different screen sizes, including toggling the sidebar and highlighting the current page in the navigation. The Theme Controller manages the theme (light/dark) based on user preference or system settings, persisting the choice in local storage. The code uses classes and event listeners for efficient state management and dynamic UI updates.

I opted for classes due to state management issues, especially is Sidebar Open and is Mobile. Binding them up here makes it very easy to elegantly manage.

The collapsed versions should look like these:

Step 3: ApexCharts configurations

For a little taste of the awesome and relatively lightweight charting library (the reason it was preferred compared to Chart.js): The JavaScript code below defines initialize Monthly Chart, initialize Financial Chart and debounce, 218 lines, from assets slash js slash index dot chart dot js.

This code configures and initializes ApexCharts for the dashboard. initialize Monthly Chart and initialize Financial Chart functions define the options for two different area charts, including series data, chart type, colors, and grid settings. The code also includes a Mutation Observer to handle theme changes and a debounce function to optimize resize event handling, ensuring the charts are responsive and adapt to the selected theme.

There are other pages implemented and the repo has them. You can also preview its live version.

Outro

Enjoyed this article? I'm a Software Engineer, Technical Writer, and Technical Support Engineer actively seeking new opportunities, particularly in areas related to web security, finance, healthcare, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn and X. I am also an email away.

If you found this article valuable, consider sharing it with your network to help spread the knowledge!