How to build a basic dashboard layout with Tailwind CSS 2.x

How to build a basic dashboard layout with Tailwind CSS 2.x

Requirement

I want to build a new Admin Dashboard system from zero. So I need to build everything.
I need a basic dashboard layout. It looks like below a picture.
basic dashboard layout

A basic dashboard has three parts.

  1. a fixed header.
  2. a menu can scorll.
  3. a main content can scroll.

Let’s go.

This article is very subjective. If you do not feel comfortable viewing it, please close it as soon as possible.
If you think my article can help you, you can subscribe to this site by using RSS.

Process

First, I want to use flex and grid make a layout. But it always unsucessful.
So, I make some research.
Finally, I used fixed and marigin to complete this reuiremnt.
Code is blow, have fun.

https://codepen.io/iiiyu/pen/gOmLMLL

Referrals

Photo by Sigmund on Unsplash

How to build a basic dashboard layout with Tailwind CSS 2.x

https://iiiyu.com/2021/05/18/Ewan-s-daily-technical-sharing-2021-05-18/

Author

Ewan Xiao

Posted on

May 18th 2021

Updated on

May 17th 2024

Licensed under

Comments