Welcome to the second 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.
To pickup where we left of our first order of business is to build the following sign up page.
First go ahead and create a new file called sign-up.html inside your dist folder. We start of by adding some mark-up first. Between the html body tags add the following.
<aside>
<img src="./img/logo-light.png" alt="">
<img src="./img/content/login-pic.png" alt="">
<h1>Plan Includes</h1>
<ul>
<li>Unlimited Users</li>
<li>Unlimited Projects</li>
<li>Unlimited Storage</li>
<li>Unlimited Support</li>
</ul>
</aside>
<main>
<div>
<h1>Sign Up</h1>
<p>Sign up with Open account</p>
<button>Google</button>
<button>Apple ID</button>
<hr />
<p>Or continue with email address</p>
<input type="email">
<button>Continue</button>
<small>This site is protected by reCAPTCHA and the Google Privacy Policy.</small>
<p><span>Already a member?</span> Sign In</p>
</div>
</main>
As you can see the mark-up matches the layout we are trying to achieve, I always try and add as much semantic elements as I can to avoid div spamming my mark-up.
So now that we have the easy part done, lets move over to the styling. First of DaisyUI is a component library and does not concern itself with layout, thus we will first get the layout sorted before start adding some components.
Tailwind provides a few nice features we can use called directives, you can learn more about directives here.
Next go ahead and add all of the following classes to the mark-up, note the input has changed, we now are using the input group mark-up supplied by DaisyUI.
<aside class="side-bar not-prose">
<img class="logo absolute top-4 left-4" src="./img/logo-light.png" alt="">
<div class="content">
<img class="login-pic" src="./img/login-pic.png" alt="">
<h2 class="text-white text-4xl font-bold my-12">Plan Includes</h2>
<ul class="list">
<li>Unlimited Users</li>
<li>Unlimited Projects</li>
<li>Unlimited Storage</li>
<li>Unlimited Support</li>
</ul>
</div>
</aside>
<main class="main auth">
<img class="logo md:hidden !m-0 absolute top-4 left-4" src="./img/logo-light.png" alt="">
<div class="sign-up">
<h1>Sign Up</h1>
<p class="font-semibold">Sign up with Open account</p>
<div class="inline 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>
</div>
</main>
Finally add the CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply font-sans prose dark:prose-invert text-base prose-p:my-4;
}
}
@layer utilities {
.list-checked {
@apply relative pl-8 before:w-6 before:h-6 before:absolute before:left-0 before:top-0;
}
.list-checked::before {
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 8-8 7.98 7.98 0 0 1 5.942 2.644L11 13.586l-2.793-2.793a1 1 0 0 0-1.414 1.414L9.586 15a2 2 0 0 0 2.828 0l6.687-6.687C19.676 9.416 20 10.67 20 12z' fill='%2383bf6e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}
.inline {
@apply flex flex-col md:flex-row gap-4 items-center;
}
}
@layer components {
.public-layout {
@apply flex min-h-screen w-screen bg-base-100 ;
}
.logo {
@apply h-auto w-14;
}
.side-bar {
@apply hidden flex-shrink-0 w-full max-w-sm bg-gray-100 dark:bg-base-300 p-4 md:flex flex-col;
}
.side-bar .login-pic {
@apply h-auto w-48 mx-auto;
}
.side-bar .content {
@apply flex flex-col items-center justify-center flex-grow mx-auto max-w-xs;
}
.side-bar .list {
@apply flex flex-col gap-6 text-left w-full;
}
.side-bar .list li {
@apply list-checked;
}
.main.auth {
@apply flex flex-col items-center justify-center flex-grow w-full;
}
.main.auth .sign-up {
@apply flex flex-col items-start justify-center flex-grow w-full mx-auto max-w-xs text-left px-4 md:px-0;
}
.btn > img {
@apply h-auto w-6 m-0;
}
.oAuth-btn {
@apply hover:bg-transparent hover:text-base-content gap-2 md:w-max w-full flex-grow;
}
hr {
@apply !my-8 h-1 w-full;
}
}
***********Important points to note:***********
One, the not-prose class removes all styles applied from the Tailwind Typography plugin for that container and all child elements.
Two, we will override some basic settings from the prose class used for the Tailwind typography plugin we installed previously. Here we are overriding the default margin applied to paragraph tags and adding support for dark mode, applying a base font size and font style.
@layer base {
html {
@apply font-sans prose dark:prose-invert text-base prose-p:my-4;
}
}
Next add the class public-layout to your body tag inside the sign-up.html file. Open your input.css file and add the following code. This will ensure our page always span the full width and height of the screen even if there is no content.
@layer components {
.public-layout {
@apply flex min-h-screen w-screen bg-base-100;
}
}
Utilities are a great and really powerful way to add custom utility classes to use with Tailwind, Here I created a utility class to create the slick checked list on the side bar, the reason we went with a utility class will be explained in a bit. A common class I always find myself using is flex with a flex-col and flex-row for larger displays, now we can compress this to one single class as we did with .inline I add some basic spacing and alignment as well, but this can easily be overridden by adding custom classes to the target element.
@layer utilities {
.list-checked {
@apply relative pl-8 before:w-6 before:h-6 before:absolute before:left-0 before:top-0;
}
.list-checked::before {
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 8-8 7.98 7.98 0 0 1 5.942 2.644L11 13.586l-2.793-2.793a1 1 0 0 0-1.414 1.414L9.586 15a2 2 0 0 0 2.828 0l6.687-6.687C19.676 9.416 20 10.67 20 12z' fill='%2383bf6e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}
.inline {
@apply flex flex-col md:flex-row gap-4 items-center;
}
}
So back to the Checked list classes I created above, here is the reason, so whenever I would want to add the same style list anywhere else I just have to add one class to the li tag and it just works.
.side-bar .list li {
@apply list-checked;
}
All other CSS styles should be pretty self explanatory, if you have any questions feel free to DM me on twitter.
Top comments (0)