Welcome to the third part of my multipart blog series where I'll be showing you how to build a sleek and modern dashboard using Tailwind CSS and DaisyUI.
In this series, we'll be taking a step-by-step approach to creating a fully functional dashboard that is both responsive and user-friendly. We'll start by setting up our project and getting familiar with the tools we'll be using, then move on to designing and implementing the different components of the dashboard.
If you are new here you can get started with part one here. For Part two click here.
Before we jump back in here are some changes I made from the previous steps:
-
Replaced the
divwrapper for the sign up page with anformwrapper, this makes semantically more sense.
++ <form> -- <div> <h1>Sign Up</h1> <p class="font-semibold">Sign up with Open account</p> <div class="in-line w-full"> <button class="btn btn-outline oAuth-btn"><img src="./img/google.svg" />Google</button> <button class="btn btn-outline oAuth-btn"><img src="./img/apple-light.svg" />Apple ID</button> </div> <hr /> <p class="font-semibold">Or continue with email address</p> <div class="form-control w-full"> <label class="input-group"> <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> </svg> </span> <input type="text" placeholder="Email" class="input input-bordered w-full" /> </label> </div> <button class="btn btn-primary w-full mt-2">Continue</button> <small class="mt-12 font-semibold">This site is protected by reCAPTCHA and the Google Privacy Policy.</small> <p class="absolute top-4 right-4 text-white font-semibold cursor-pointer"><span class="text-sm text-neutral-content">Already a member?</span> Sign In</p> ++ </form> -- </div> -
I moved the hr styles to the base directive, this makes more sense since we directly styling a html element, I also updated the styles:
@layer base { html { @apply font-sans prose dark:prose-invert text-base prose-p:my-4; } hr { @apply border-base-content !h-0 !m-0 !my-2 w-full; } } -
I realised we created a conflicting class name,
inline, So I changed it toin-line:
.in-line { @apply flex flex-col md:flex-row gap-4 items-center; }
That’s it lets jump in.
Sign In page
Our first page today is creating the sign up page, this will take you less than 1 minute, because we already did the work previously. First go ahead and create a new file signin.html inside your dist folder. Then copy and paste all the code from the sing-up.html to your new file. Delete the side bar and update the page copy. Your file should look like this now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/output.css"></link>
<title>Daisy UI Dashboard</title>
</head>
<body class="public-layout">
<main class="main auth">
<img class="logo md:hidden !m-0 absolute top-4 left-4" src="./img/logo-light.png" alt="">
<form>
<h1>Sign In</h1>
<p class="font-semibold">Sign In with Open account</p>
<div class="in-line w-full">
<button class="btn btn-outline oAuth-btn"><img src="./img/google.svg" />Google</button>
<button class="btn btn-outline oAuth-btn"><img src="./img/apple-light.svg" />Apple ID</button>
</div>
<hr />
<p class="font-semibold">Or continue with email address</p>
<div class="form-control w-full">
<label class="input-group">
<span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</span>
<input type="text" placeholder="Email" class="input input-bordered w-full" />
</label>
</div>
<div class="form-control w-full mt-2">
<label class="input-group">
<span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
<input type="password" placeholder="Password" class="input input-bordered w-full" />
</label>
</div>
<button class="btn btn-primary w-full mt-2">Continue</button>
<small class="mt-12 font-semibold">This site is protected by reCAPTCHA and the Google Privacy Policy.</small>
<p class="absolute top-4 right-4 text-white font-semibold cursor-pointer"><span class="text-sm text-neutral-content">Need an account?</span> Sign Up</p>
</form>
</main>
</body>
</html>
Run your server and viola it’s done.
Dashboard side and top navigation.
So for the main dashboard navigation we will be using a side and top navigation, this layout is similar to our sign-in page, so we can go ahead and add the first mark-up:
<body class="public-layout">
<aside class="side-bar not-prose">
</aside>
<main class="main">
</main>
</body>
Next for the sidebar we will mostly be using DaisyUI components, add the following between the aside tags:
<img class="logo" src="./img/logo-light.png" alt="">
<ul class="aside menu">
<li>
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Home
</a>
</li>
<li>
<a href="/products">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
</svg>
Products
</a>
</li>
<li>
<a href="/customers">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Customers
</a>
</li>
<li>
<a href="/shop">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z" />
</svg>
Shop
</a>
</li>
</ul>
<hr class="mt-auto" />
<ul class="menu menu-compact">
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
Help & getting started
<div class="badge badge-primary ml-auto">8</div>
</a>
</li>
</ul>
Note the custom class aside on the first ul tag.
.aside.menu {
@apply mt-16 w-full text-lg font-semibold gap-2 flex-grow;
}
💡 For our icons we are using Hero Icons
Next Up top navigation, between your main tags add the following DaisyUI component and remove the prose styling:
<div class="navbar not-prose">
</div>
Let’s customise the navbar background and spacing add the to the components directive:
.navbar {
@apply bg-base-200 justify-between;
}
💡 To view all DaisyUI utility color classes click here
Between the navbar tags, let’s add the search input component:
<div class="form-control">
<div class="input-group">
<input type="text" placeholder="Search…" class="input input-bordered" />
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
</div>
</div>
After the form-control let’s add the icons and display picture
<!-- navbar end -->
<div class="navbar-end in-line">
<!-- messages -->
<button class="btn btn-ghost btn-circle">
<div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
</svg>
<span class="badge badge-xs badge-primary indicator-item"></span>
</div>
</button>
<!-- notifications -->
<button class="btn btn-ghost btn-circle">
<div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
<span class="badge badge-xs badge-primary indicator-item"></span>
</div>
</button>
<!-- profile dropdown -->
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/80/80/people" />
</div>
</label>
</div>
</div>
These are all daisyUI components, no other styling required.
💡 Note the in-line class on the parent div
Now I will explain how the dropdowns work. To have a DaisyUI dropdown work with zero javascript we need two things. A div wrapper with the class dropdown A label with a tabindex of 0 this will form the action or clickable element to toggle our dropdown, you can add any other components or custom components within the label tag. In our case we have an user avatar.
Next is the actual dropdown, after your label tag add the following:
<ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-200 rounded-box w-52">
<li>
<a>
Profile
</a>
</li>
<li>
<a>
Edit Profile
</a>
</li>
<hr />
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
Analytics
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Affiliate Center
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
Explore Creators
</a>
</li>
<hr />
<li>
<a class="text-secondary font-semibold active:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
Upgrade to Pro
</a>
</li>
<hr />
<li><a>Account Settings</a></li>
<li><a>Logout</a></li>
</ul>
Essentially we only need the ul tag with the tabindex of 0 and a class of dropdown-content directly after our label tag, and then some content between our ul tag, and that’s it, we have a sick dropdown.
Time to practice
Ok I gave you some neat tips, now I would like you to try and implement the Notifications dropdown all by yourself. Here is the final result:
Awesome, if you feel stuck please feel free to reach out to me on Twitter @britzdm
Top comments (0)