Building a Finance Dashboard with TailwindCSS 2.0 and Alpine.js

December 02, 2020

2 min read

After the release of Tailwind 2.0 I wanted to try out some of the new features and colours without updating an existing tailwind site in case something broke. So I found a nice shot on dribble and started out. This uses Tailwindcss 2.0 and Alpine.js.

Original on Dribbble from Ghulam Rasool

I have posted the first part of this onto github pages (linked above), and this will likely have some tweaks and UI animations/ transitions added in the future.

The original dribbble shot only contained a desktop version so I have scoured the original creators team page and found some similar examples of what mobile and tablet versions of similar interfaces would look like in order to make the interface fully response from mobile up to desktop. Try resizing the browser to see the full scale changes.

Code techniques used:

CSS Grid

CSS Grid layout overlay in chrome

CSS Grid is used to simplify the outer layout as well as the layout for the inner columns of the main dashboard area.

Chart.js

Chart.js is used for the chart that appears, though this is very minimal and does not match the original design so more work is needed on this.

TO DO

  • update second icon to Paypal
  • match design of chart features
  • match design of plan feature
  • add more tabular data
  • some more work on the focus and hover states

Overall this was fun to do and I recomend to anyone to find a design or some layout and just build it as practice.