Published on

The 5 Really Obvious Ways To Create A Header / Sidebar / Dashboard With Tailwind CSS Better That You Ever Did

Tags
Header / Sidebar / Dashboard

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that is rapidly gaining popularity among web developers. It provides pre-defined CSS classes that can be used to create a wide range of UI components quickly and easily. With Tailwind CSS, you can build complex layouts and designs without writing a single line of custom CSS.

The description of Header / Sidebar / Dashboard UI component

Header, sidebar, and dashboard are essential UI components for any web application. The header is the topmost part of the screen that contains the logo, navigation menu, and other important information. The sidebar is a vertical panel on the left or right side of the screen that contains links to different sections of the application. The dashboard is the main screen of the application that displays the most important information and data.

Why use Tailwind CSS to create a Header / Sidebar / Dashboard UI component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a header, sidebar, and dashboard quickly and easily. It eliminates the need to write custom CSS, which saves time and effort. Moreover, Tailwind CSS is highly customizable, which means you can easily modify the default styles to match your design requirements.

The preview of Header / Sidebar / Dashboard UI component

To create a header, sidebar, and dashboard with Tailwind CSS, we will use the following classes:

  • bg-gray-800: sets the background color of the header and sidebar to gray.
  • text-white: sets the text color of the header and sidebar to white.
  • flex: sets the display property of the header and sidebar to flex.
  • justify-between: aligns the logo and navigation menu to the left and right sides of the header, respectively.
  • w-64: sets the width of the sidebar to 64 pixels.
  • h-screen: sets the height of the sidebar to the full height of the screen.
  • overflow-y-auto: adds a scrollbar to the sidebar if its content exceeds the height of the screen.
  • px-4: adds padding to the left and right sides of the dashboard.
  • py-8: adds padding to the top and bottom sides of the dashboard.

Free download of the Header / Sidebar / Dashboard's source code

The source code of Header / Sidebar / Dashboard UI component

To create a header, sidebar, and dashboard with Tailwind CSS, use the following HTML code:

<div class="h-screen w-full bg-white relative flex overflow-hidden">

  <!-- Sidebar -->
  <aside class="h-full w-16 flex flex-col space-y-10 items-center justify-center relative bg-gray-800 text-white">
    <!-- Profile -->
    <div class="h-10 w-10 flex items-center justify-center rounded-lg cursor-pointer hover:text-gray-800 hover:bg-white  hover:duration-300 hover:ease-linear focus:bg-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
    </div>

    <!-- Courses -->
    <div class="h-10 w-10 flex items-center justify-center rounded-lg cursor-pointer hover:text-gray-800 hover:bg-white  hover:duration-300 hover:ease-linear focus:bg-white">
      <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
    </div>

    <!-- Theme -->
    <div class="h-10 w-10 flex items-center justify-center rounded-lg cursor-pointer hover:text-gray-800 hover:bg-white  hover:duration-300 hover:ease-linear focus:bg-white">
      <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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
      </svg>
    </div>

    <!-- Configuration -->
    <div class="h-10 w-10 flex items-center justify-center rounded-lg cursor-pointer hover:text-gray-800 hover:bg-white  hover:duration-300 hover:ease-linear focus:bg-white">
      <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    </div>
  </aside>

  
 
  <div class="w-full h-full flex flex-col justify-between">
    <!-- Header -->
    <header class="h-16 w-full flex items-center relative justify-end px-5 space-x-10 bg-gray-800">
      <!-- Informação -->
      <div class="flex flex-shrink-0 items-center space-x-4 text-white">
        
        <!-- Texto -->
        <div class="flex flex-col items-end ">
          <!-- Nome -->
          <div class="text-md font-medium ">Unknow Unknow</div>
          <!-- Título -->
          <div class="text-sm font-regular">Student</div>
        </div>
        
        <!-- Foto -->
        <div class="h-10 w-10 rounded-full cursor-pointer bg-gray-200 border-2 border-blue-400"></div>
      </div>
    </header>

    <!-- Main -->
    <main class="max-w-full h-full flex relative overflow-y-hidden">
      <!-- Container -->
      <div class="h-full w-full m-4 flex flex-wrap items-start justify-start rounded-tl grid-flow-col auto-cols-max gap-4 overflow-y-scroll">
        <!-- Container -->
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
        <div class="w-96 h-60 rounded-lg flex-shrink-0 flex-grow bg-gray-400"></div>
      </div>
    </main>
  </div>

</div>

How to create a Header / Sidebar / Dashboard with Tailwind CSS?

To create a header, sidebar, and dashboard with Tailwind CSS, follow these steps:

Step 1: Set up the HTML structure

First, create the HTML structure for the header, sidebar, and dashboard. Use the following code:

<div class="flex flex-col h-screen">
  <div class="bg-gray-800 text-white flex justify-between items-center px-4 py-3">
    <div class="flex items-center">
      <img src="logo.png" alt="Logo" class="h-8 mr-2">
      <h1 class="text-lg font-bold">My App</h1>
    </div>
    <nav>
      <a href="#" class="px-3 py-2">Home</a>
      <a href="#" class="px-3 py-2">About</a>
      <a href="#" class="px-3 py-2">Contact</a>
    </nav>
  </div>
  <div class="bg-gray-800 text-white w-64 px-4 py-8 overflow-y-auto">
    <a href="#" class="block py-2">Dashboard</a>
    <a href="#" class="block py-2">Profile</a>
    <a href="#" class="block py-2">Settings</a>
    <a href="#" class="block py-2">Logout</a>
  </div>
  <div class="flex-1 px-4 py-8">
    <!-- Dashboard content goes here -->
  </div>
</div>

This code creates a container div with a height of 100% of the screen. Inside this div, we have three child divs: the header, sidebar, and dashboard.

Step 2: Style the header and sidebar

Next, add the Tailwind CSS classes to style the header and sidebar. Use the following code:

<div class="bg-gray-800 text-white flex justify-between items-center px-4 py-3">
  <div class="flex items-center">
    <img src="logo.png" alt="Logo" class="h-8 mr-2">
    <h1 class="text-lg font-bold">My App</h1>
  </div>
  <nav>
    <a href="#" class="px-3 py-2">Home</a>
    <a href="#" class="px-3 py-2">About</a>
    <a href="#" class="px-3 py-2">Contact</a>
  </nav>
</div>
<div class="bg-gray-800 text-white w-64 px-4 py-8 overflow-y-auto">
  <a href="#" class="block py-2">Dashboard</a>
  <a href="#" class="block py-2">Profile</a>
  <a href="#" class="block py-2">Settings</a>
  <a href="#" class="block py-2">Logout</a>
</div>

This code sets the background color of the header and sidebar to gray, the text color to white, and aligns the logo and navigation menu to the left and right sides of the header, respectively. It also sets the width of the sidebar to 64 pixels and adds a scrollbar to the sidebar if its content exceeds the height of the screen.

Step 3: Add content to the dashboard

Finally, add the Tailwind CSS classes to style the dashboard and add content to it. Use the following code:

<div class="flex-1 px-4 py-8">
  <!-- Dashboard content goes here -->
</div>

This code sets the padding of the dashboard and creates a container div for the dashboard content.

Conclusion

In conclusion, Tailwind CSS is an excellent choice for creating UI components like headers, sidebars, and dashboards. It provides a set of pre-defined CSS classes that can be used to create these components quickly and easily. By following the steps outlined in this article, you can create a header, sidebar, and dashboard with Tailwind CSS in no time.