In this tutorial, we’ll will Build Dashboard with HTML Tailwind CSS and JavaScript. This dashboard features a sleek, dark-themed interface with stunning visualizations and interactive components, such as charts and a responsive sidebar. Designed with user experience in mind, it incorporates Tailwind CSS for responsive styling and Chart.js for dynamic data visualizations, making it ideal for those looking to create an eye-catching and functional dashboard.
Introduction to Build Dashboard with HTML Tailwind CSS and JavaScript
Dashboards have become indispensable tools in digital product interfaces, enabling users to view analytics, track progress, and make data-driven decisions quickly. By building a dashboard with HTML and Tailwind CSS, you can create a modular, scalable, and aesthetically pleasing interface without sacrificing performance
In this tutorial, we’re focusing on a few essentials:
- HTML for structure
- Tailwind CSS for styling
- JavaScript for interactivity and data visualization (using Chart.js)
With this approach, you’ll be able to customize your dashboard’s look and feel, add dynamic elements, and create responsive layouts that work seamlessly across all devices.
Setting Up the Project Structure
For this dashboard, you’ll need a basic project structure. You’ll create separate files for your HTML, CSS (compiled by Tailwind), and JavaScript.
- HTML: This will define the dashboard’s structure, layout, and accessibility.
- Tailwind CSS: Use Tailwind’s utility-first classes for fast and responsive design without writing custom CSS.
- JavaScript (Chart.js): Chart.js will handle the visual representation of data, helping you generate dynamic charts for data visualization.
Subscribe to my YouTube channel
HTML Structure and Layout
Let’s dive into the HTML structure for a simple yet functional dashboard. We’ll start with a header, sidebar, and main content area that includes interactive widgets and data charts.
Adding Styles with Tailwind CSS
With Tailwind, styling becomes much more efficient. You’ll add classes directly to HTML elements to define their appearance, layout, and responsiveness. Below, we’ll cover how Tailwind is used for each section:
- Header: This contains the app name, search bar, and profile information.
- Sidebar: Acts as the navigation menu for different dashboard sections.
- Main Content Area: Holds dynamic widgets for revenue flow, income, expenses, and available balance.
Creating Interactivity with JavaScript
JavaScript adds functionality to your dashboard. For instance, you can create interactive charts with Chart.js to display data trends.
Source code
If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML and the other is JS after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Code by : www.codeinfoweb.com -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./output.css" rel="stylesheet" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<title>Finavise Dashboard</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
body {
font-family: "Itim", cursive;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 overflow-x-clip">
<!-- Header Section -->
<header class="p-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<button
id="menuButton"
class="text-gray-100 text-3xl lg:hidden hover:text-gray-400"
aria-label="Open Menu"
>
<i class="bx bx-menu"></i>
</button>
<div class="flex items-center gap-2 text-teal-400 cursor-pointer">
<i class="bx bx-infinite text-3xl"></i>
<span class="text-xl font-semibold">Finavise</span>
</div>
</div>
<div class="flex items-center">
<div class="relative hidden lg:flex w-[500px]">
<input
type="text"
placeholder="Search..."
class="w-full py-2 pl-10 pr-4 bg-gray-800 border border-gray-600 rounded-md text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500"
/>
<i
class="bx bx-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
></i>
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-gray-300 font-medium">John Doe</span>
<img
src="../src/user.png"
alt="User Avatar"
class="w-10 h-10 rounded-full border border-gray-600"
/>
</div>
</header>
<div class="flex p-3 gap-4">
<!-- Sidebar Section -->
<aside
id="sidebar"
class="w-42 hidden lg:block rounded-lg bg-gray-800 p-2 py-5 fixed lg:relative lg:translate-x-0 transform -translate-x-full transition-transform duration-200 ease-in-out"
>
<nav class="space-y-4">
<a
href="#"
class="flex items-center space-x-3 text-gray-300 hover:bg-gray-700 p-3 rounded-md"
>
<i class="bx bx-home-alt text-teal-400"></i>
<span>Dashboard</span>
</a>
<a
href="#"
class="flex items-center space-x-3 text-gray-300 hover:bg-gray-700 p-3 rounded-md"
>
<i class="bx bx-line-chart text-teal-400"></i>
<span>Analytics</span>
</a>
<a
href="#"
class="flex items-center space-x-3 text-gray-300 hover:bg-gray-700 p-3 rounded-md"
>
<i class="bx bx-wallet text-teal-400"></i>
<span>Transactions</span>
</a>
<a
href="#"
class="flex items-center space-x-3 text-gray-300 hover:bg-gray-700 p-3 rounded-md"
>
<i class="bx bx-user text-teal-400"></i>
<span>Account</span>
</a>
<a
href="#"
class="flex items-center space-x-3 text-gray-300 hover:bg-gray-700 p-3 rounded-md"
>
<i class="bx bx-cog text-teal-400"></i>
<span>Settings</span>
</a>
</nav>
</aside>
<!-- Main Section -->
<main
class="flex-1 bg-gray-900 flex gap-4 flex-col lg:flex-row ml-0 lg:ml-42"
>
<section
class="w-full lg:flex-1 p-4 space-y-6 bg-gray-800 flex flex-col rounded-lg"
>
<!-- Revenue Flow Card (full width) -->
<div class="bg-gray-700 p-5 rounded-md">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<i class="bx bx-trending-up text-teal-400 text-2xl"></i>
<h2 class="text-lg font-semibold text-gray-100">
Revenue Flow
</h2>
</div>
<span class="text-xl font-bold text-gray-100">$24,300</span>
</div>
<canvas id="revenueFlowChart" class="w-full"></canvas>
</div>
<div class="flex gap-4 flex-col md:flex-row">
<!-- Income Card with Growth -->
<div
class="bg-gray-700 p-5 flex-1 rounded-md flex items-center justify-between"
>
<div
class="flex md:items-center gap-2 flex-col lg:flex-row items-start"
>
<i class="bx bx-dollar-circle text-teal-400 text-2xl"></i>
<h2 class="text-sm md:text-lg font-semibold text-gray-100">
Income
</h2>
</div>
<div
class="text-xl font-bold text-gray-100 flex flex-col items-end lg:flex-row lg:items-center gap-2"
>
<span class="text-sm lg:text-lg">$15,200</span>
<span class="text-green-400 text-sm">+8%</span>
</div>
</div>
<!-- Expense Card with Growth -->
<div
class="bg-gray-700 p-4 md:p-5 flex-1 rounded-md flex items-center justify-between"
>
<div
class="flex md:items-center gap-2 flex-col lg:flex-row items-start"
>
<i class="bx bx-cart text-teal-400 text-2xl"></i>
<h2 class="text-sm md:text-lg font-semibold text-gray-100">
Expenses
</h2>
</div>
<div
class="text-xl font-bold text-gray-100 flex flex-col items-end lg:flex-row lg:items-center gap-2"
>
<span class="text-sm lg:text-lg">$6,700</span>
<span class="text-red-400 text-sm">-5%</span>
</div>
</div>
</div>
</section>
<!-- Right Side Content -->
<section
class="w-full lg:w-[300px] p-4 flex flex-col justify-between gap-4 bg-gray-800 rounded-lg"
>
<!-- Credit Card -->
<div
class="bg-gradient-to-r from-teal-500 to-blue-600 p-5 rounded-lg text-white"
>
<h3 class="text-xl font-semibold mb-2">Credit Card</h3>
<p class="text-sm mb-4">Valid Thru: 12/25</p>
<div class="mb-6">
<span class="block text-lg font-bold tracking-wide"
>•••• •••• •••• 1234</span
>
</div>
<div class="flex justify-between">
<div>
<span class="text-xs uppercase text-gray-200">Card Holder</span>
<p class="text-lg font-medium">John Doe</p>
</div>
<div>
<span class="text-xs uppercase text-gray-200">Balance</span>
<p class="text-lg font-medium">$5,300</p>
</div>
</div>
</div>
<!-- Available Balance with Pie Chart -->
<div class="bg-gray-700 p-5 rounded-md overflow-hidden">
<div class="flex items-center justify-between mb-4">
<i class="bx bx-wallet text-teal-400 text-2xl"></i>
<h2 class="text-lg font-semibold text-gray-100">Available</h2>
</div>
<div class="flex justify-center px-10 overflow-hidden">
<canvas
id="availableBalanceChart"
class="w-20 md:w-32 lg:w-40"
></canvas>
</div>
</div>
</section>
</main>
</div>
<!-- Include Chart.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
JS Code
// Toggle sidebar visibility on mobile
document.getElementById("menuButton").addEventListener("click", () => {
const sidebar = document.getElementById("sidebar");
sidebar.classList.toggle("-translate-x-full");
// Toggle the 'hidden' class based on the sidebar visibility
if (sidebar.classList.contains("-translate-x-full")) {
sidebar.classList.add("hidden");
} else {
sidebar.classList.remove("hidden");
}
});
// Revenue Flow Chart
const revenueCtx = document.getElementById("revenueFlowChart").getContext("2d");
new Chart(revenueCtx, {
type: "bar",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "Revenue ($)",
data: [3000, 4000, 3500, 5000, 7000, 6000, 8000],
backgroundColor: "rgba(20, 184, 166, 0.6)",
borderColor: "rgba(255, 255, 255, 0.8)",
borderWidth: 2,
borderRadius: 10,
},
],
},
options: {
responsive: true,
scales: {
y: { beginAtZero: true, ticks: { color: "#e5e7eb" } },
x: { ticks: { color: "#e5e7eb" } },
},
plugins: { legend: { labels: { color: "#e5e7eb" } } },
},
});
// Available Balance Pie Chart
const balanceCtx = document
.getElementById("availableBalanceChart")
.getContext("2d");
new Chart(balanceCtx, {
type: "pie",
data: {
datasets: [
{
data: [3500, 5000],
backgroundColor: ["#1f2937", "#14b8a6"],
},
],
},
options: {
responsive: true,
plugins: { legend: { labels: { color: "#e5e7eb" } } },
},
});
Best Practices for Building Dashboards
- Responsive Design: Ensure your dashboard adjusts to different screen sizes using Tailwind’s responsive classes (lg:hidden, md:flex, etc.).
- Accessible Colors: Make sure the color contrast is high enough for readability, particularly in dark mode.
- Minimize JavaScript and CSS: Tailwind CSS and Chart.js are both lightweight, but try to reduce any extra styles and scripts that could slow down performance.
- Interactive and Informative Charts: Use Chart.js to build intuitive visualizations; avoid overcrowding charts with too much information.
Conclusion
Creating a dashboard with HTML, Tailwind CSS, and JavaScript is a powerful way to deliver a user-friendly interface. Tailwind’s utility classes make styling efficient, while JavaScript enables you to add dynamic elements that improve user engagement. Following best practices for responsive design, accessibility, and code modularity will help you build dashboards that are both visually appealing and highly functional.
