Published on

6 Tips To Build A Dashboard With Tailwind CSS

Tags
CardsNavigationsPagesWidget
Dashboard

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Dashboard ui component

Dashboard

Why use Tailwind CSS to create a Dashboard ui component?

  • It can make the building process of Dashboard ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Dashboard component file.

The preview of Dashboard ui component

Free download of the Dashboard's source code

The source code of Dashboard ui component

<div class="flex bg-gray-100 rounded-xl m-3 shadow-xl">
  <aside class="flex px-16 space-y-16 overflow-hidden m-3 pb-4 flex-col items-center justify-center rounded-tl-xl rounded-bl-xl bg-blue-800 shadow-lg">
    <div class="flex items-center justify-center p-4 shadow-lg">
      <div>
        <img src="https://i.imgur.com/c6U7KtF.png" alt="" class="h-8 mb-2" />
      </div>
      <h1 class="text-white font-bold mr-2 cursor-pointer">XFIT KIDS</h1>
    </div>
    <ul>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg
        ><a href="">Dashboard</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg
        ><a href="">Attendance</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg
        ><a href="">Sessions</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg
        ><a href="">Coaches</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg
        ><a href="">Exercise Plan</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg
        ><a href="">Registrations</a>
      </li>
      <li class="flex space-x-2 mt-4 px-6 py-4 text-white hover:bg-white hover:text-blue-800 font-bold hover:rounded-br-3xl transition duration-100 cursor-pointer">
        <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
        ><a href="">Settings</a>
      </li>
    </ul>
  </aside>
  <main class="flex-col bg-indigo-50 w-full ml-4 pr-6">
    <div class="flex justify-between p-4 bg-white mt-3 rounded-xl shadow-lg">
      <h1 class="text-xl font-bold text-gray-700">Welcome to xfitkids</h1>
      <div class="flex justify-between w-2/5">
        <div class="flex items-center border-2 p-2 rounded-xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" 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>
          <input type="text" placeholder="Search" class="ml-2 outline-none w-full" />
        </div>
        <div class="flex items-center space-x-6 pr-8">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 cursor-pointer text-gray-400" 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>
          <img src="https://i.imgur.com/iH7hkQb.png" alt="" class="cursor-pointer" />
        </div>
      </div>
    </div>
    <div class="flex justify-between mt-4 space-x-4 s">
      <div class="bg-white w-1/3 rounded-xl shadow-lg flex items-center justify-around">
        <img src="https://i.imgur.com/VHc5SJE.png" alt="" />
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-800">534</h1>
          <span class="text-gray-500">Coaches</span>
        </div>
      </div>
      <div class="bg-white w-1/3 rounded-xl shadow-lg flex items-center justify-around">
        <img src="https://i.imgur.com/Qnmqkil.png" alt="" />
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-800">9.7k</h1>
          <span class="text-gray-500">Kids</span>
        </div>
      </div>
      <div class="bg-white w-1/3 rounded-xl shadow-lg flex items-center justify-around">
        <img src="https://i.imgur.com/dJeEVcO.png" alt="" />
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-800">50 M</h1>
          <span class="text-gray-500">Revenue</span>
        </div>
      </div>
    </div>
    <div class="flex space-x-4">
      <div class="justify-between rounded-xl mt-4 p-4 bg-white shadow-lg">
        <h1 class="text-xl font-bold text-gray-800 mt-4">Today’s Status</h1>
        <div class="flex justify-between space-x-4 text-center mt-6">
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>8.7K</h3>
            <spnan>Total Present</spnan>
          </div>
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>99</h3>
            <spnan>Registrations</spnan>
          </div>
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>30</h3>
            <spnan>Totals Session</spnan>
          </div>
        </div>
      </div>
      <div class="justify-between rounded-xl mt-4 p-4 bg-white shadow-lg">
        <h1 class="text-xl font-bold text-gray-800 mt-4">Today’s Status</h1>
        <div class="flex justify-between space-x-4 text-center mt-6">
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>8.7K</h3>
            <spnan>Total Present</spnan>
          </div>
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>99</h3>
            <spnan>Registrations</spnan>
          </div>
          <div class="bg-indigo-50 rounded-xl p-10">
            <h3>30</h3>
            <spnan>Totals Session</spnan>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

How to create a Dashboard with Tailwind CSS?

Install tailwind css of verion 2.2.4

Use the script html tag to import the script of Tailwind CSS of the version 2.2.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to create a Dashboard component

  • flex
  • bg-gray-100
  • m-3
  • px-16
  • overflow-hidden
  • pb-4
  • flex-col
  • bg-blue-800
  • p-4
  • h-8
  • mb-2
  • text-white
  • mr-2
  • mt-4
  • px-6
  • py-4
  • hover:bg-white
  • hover:text-blue-800
  • h-6
  • w-6
  • bg-indigo-50
  • w-full
  • ml-4
  • pr-6
  • bg-white
  • mt-3
  • text-xl
  • text-gray-700
  • w-2/5
  • border-2
  • p-2
  • text-gray-400
  • ml-2
  • pr-8
  • w-8
  • w-1/3
  • text-center
  • text-4xl
  • text-gray-800
  • text-gray-500
  • mt-6
  • p-10

42 steps to create a Dashboard component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  3. Control the margin on all sides of an element to 0.75rem using the m-3 utilities.

  4. Control the horizontal padding of an element to 4rem using the px-16 utilities.

  5. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  6. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  7. Use flex to create a block-level flex container.

  8. Control the background color of an element to blue-800 using the bg-blue-800 utilities.

  9. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  10. Use h-8 to set an element to a fixed height(2rem).

  11. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  12. Control the text color of an element to white using the text-white utilities.

  13. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  14. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  15. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  16. Control the vertical padding of an element to 1rem using the py-4 utilities.

  17. Control the background color of an element to white using the hover:bg-white utilities on hover.

  18. Control the text color of an element to blue-800 on hover using the hover:text-blue-800 utilities.

  19. Use h-6 to set an element to a fixed height(1.5rem).

  20. Use w-6 to set an element to a fixed width(1.5rem).

  21. Control the background color of an element to indigo-50 using the bg-indigo-50 utilities.

  22. Use w-full to set an element to a 100% based width.

  23. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  24. Control the padding on right side of an element to 1.5rem using the pr-6 utilities.

  25. Control the background color of an element to white using the bg-white utilities.

  26. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  27. Control the text color of an element to xl using the text-xl utilities.

  28. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  29. Use w-2/5 to set an element to a fixed width(2/5).

  30. Control the border color of an element to 0.5rem using the border-2 utilities.

  31. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  32. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  33. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  34. Control the padding on right side of an element to 2rem using the pr-8 utilities.

  35. Use w-8 to set an element to a fixed width(2rem).

  36. Use w-1/3 to set an element to a fixed width(1/3).

  37. Control the text color of an element to center using the text-center utilities.

  38. Control the text color of an element to 4xl using the text-4xl utilities.

  39. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  40. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  41. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  42. Control the padding on all sides of an element to 2.5rem using the p-10 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Dashboard components, learn and follow along to implement your own components.