Published on

The Ultimate Guide To Help You Make A Dashboard Stats With Tailwind CSS

Tags
CardsWidget
Dashboard stats

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 stats ui component

Cards

Why use Tailwind CSS to make a Dashboard stats ui component?

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

The preview of Dashboard stats ui component

Free download of the Dashboard stats's source code

The source code of Dashboard stats ui component

<!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">
    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Tailwind stats cards</title>
</head>
<body class="" style="background: #edf2f7;">

<!---===================== FIRST ROW CONTAINING THE  STATS CARD STARTS HERE =============================-->
  <div class="flex justify-center bg-gray-100 py-10 p-14">
    <!---== First Stats Container ====--->
  <div class="container mx-auto pr-4">
    <div class="w-72 bg-white max-w-xs mx-auto rounded-sm overflow-hidden shadow-lg hover:shadow-2xl transition duration-500 transform hover:scale-100 cursor-pointer">
      <div class="h-20 bg-red-400 flex items-center justify-between">
        <p class="mr-0 text-white text-lg pl-5">BT SUBSCRIBERS</p>
      </div>
      <div class="flex justify-between px-5 pt-6 mb-2 text-sm text-gray-600">
        <p>TOTAL</p>
      </div>
      <p class="py-4 text-3xl ml-5">20,456</p>
      <!-- <hr > -->
    </div>
  </div>
      <!---== First Stats Container ====--->

    <!---== Second Stats Container ====--->
  <div class="container mx-auto pr-4">
    <div class="w-72 bg-white max-w-xs mx-auto rounded-sm overflow-hidden shadow-lg hover:shadow-2xl transition duration-500 transform hover:scale-100 cursor-pointer">
      <div class="h-20 bg-blue-500 flex items-center justify-between">
        <p class="mr-0 text-white text-lg pl-5">BT ACTIVE SUBSCRIBERS</p>
      </div>
      <div class="flex justify-between px-5 pt-6 mb-2 text-sm text-gray-600">
        <p>TOTAL</p>
      </div>
      <p class="py-4 text-3xl ml-5">19,694</p>
      <!-- <hr > -->
    </div>
  </div>
    <!---== Second Stats Container ====--->

  <!---== Third Stats Container ====--->
  <div class="container mx-auto pr-4">
    <div class="w-72 bg-white max-w-xs mx-auto rounded-sm overflow-hidden shadow-lg hover:shadow-2xl transition duration-500 transform hover:scale-100 cursor-pointer">
      <div class="h-20 bg-purple-400 flex items-center justify-between">
        <p class="mr-0 text-white text-lg pl-5">BT OPT OUTS</p>
      </div>
      <div class="flex justify-between pt-6 px-5 mb-2 text-sm text-gray-600">
        <p>TOTAL</p>
      </div>
      <p class="py-4 text-3xl ml-5">711</p>
      <!-- <hr > -->
    </div>
  </div>
  <!---== Third Stats Container ====--->

  <!---== Fourth Stats Container ====--->
  <div class="container mx-auto">
    <div class="w-72 bg-white max-w-xs mx-auto rounded-sm overflow-hidden shadow-lg hover:shadow-2xl transition duration-500 transform hover:scale-100 cursor-pointer">
      <div class="h-20 bg-purple-900 flex items-center justify-between">
        <p class="mr-0 text-white text-lg pl-5">BT TODAY'S SUBSCRIPTION</p>
      </div>
      <div class="flex justify-between pt-6 px-5 mb-2 text-sm text-gray-600">
        <p>TOTAL</p>
      </div>
      <p class="py-4 text-3xl ml-5">0</p>
      <!-- <hr > -->
    </div>
  </div>
  <!---== Fourth Stats Container ====--->
</div>
<!---===================== FIRST ROW CONTAINING THE  STATS CARD ENDS HERE =============================-->

<!------===================== SECOND ROW CONTAINING THE TABLE STATS STARTS HERE =============================-->
<div class="flex justify-center bg-gray-100 py-10 p-5">
  <!--==== frist div begins here ====--->
  <div class="container mr-5 ml-2 mx-auto bg-white shadow-xl">
    <div class="w-11/12 mx-auto">
      <div class="bg-white my-6">
        <table class="text-left w-full border-collapse"> <!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
          <thead>
            <tr>
              <th class="py-4 px-6 bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">KEYWORDS</th>
              <th class="py-4 px-6 text-center bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">TOTAL ENTERIES</th>
            </tr>
          </thead>
          <tbody>
            <tr class="hover:bg-grey-lighter">
              <td class="py-4 px-6 border-b border-grey-light">Bible</td>
              <td class="py-4 px-6 text-center border-b border-grey-light">
                11980
              </td>
            </tr>
            <tr class="hover:bg-grey-lighter">
              <td class="py-4 px-6 border-b border-grey-light">Blah</td>
              <td class="py-4 px-6 text-center border-b border-grey-light">
                340
              </td>
            </tr>
            <tr class="hover:bg-grey-lighter">
              <td class="py-4 px-6 border-b border-grey-light">Blah</td>
              <td class="py-4 px-6 text-center border-b border-grey-light">
                901
              </td>
            </tr>
            <tr class="hover:bg-grey-lighter">
              <td class="py-4 px-6 border-b border-grey-light">Blah</td>
              <td class="py-4 px-6 text-center border-b border-grey-light">
                11950
              </td>
            </tr>
            <tr class="hover:bg-grey-lighter">
              <td class="py-4 px-6 border-b border-grey-light">Blah</td>
              <td class="py-4 px-6 text-center border-b border-grey-light">
                459
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      </div>
        </div>
    <!--==== frist div ends here ====--->

    <!--==== Second div begins here ====--->
    <div class="container mr-5 mx-auto bg-white shadow-xl">
      <div class="w-11/12 mx-auto">
        <div class="bg-white my-6">
          <table class="text-left w-full border-collapse"> <!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
            <thead>
              <tr>
                <th class="py-4 px-6 bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">MSISDN</th>
                <th class="py-4 px-6 text-center bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">ENTRIES</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover:bg-grey-lighter">
                <td class="py-4 px-6 border-b border-grey-light">26809304030</td>
                <td class="py-4 px-6 text-center border-b border-grey-light">
                  495,455
                </td>
              </tr>
              <tr class="hover:bg-grey-lighter">
                <td class="py-4 px-6 border-b border-grey-light">26809304030</td>
                <td class="py-4 px-6 text-center border-b border-grey-light">
                  495,455
                </td>
              </tr>
              <tr class="hover:bg-grey-lighter">
                <td class="py-4 px-6 border-b border-grey-light">26809304030</td>
                <td class="py-4 px-6 text-center border-b border-grey-light">
                  495,455
                </td>
              </tr>
              <tr class="hover:bg-grey-lighter">
                <td class="py-4 px-6 border-b border-grey-light">26809304030</td>
                <td class="py-4 px-6 text-center border-b border-grey-light">
                  32,333
                </td>
              </tr>
              <tr class="hover:bg-grey-lighter">
                <td class="py-4 px-6 border-b border-grey-light">26809304030</td>
                <td class="py-4 px-6 text-center border-b border-grey-light">
                  31,199
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        </div>
          </div>
      <!--==== Second div ends here ====--->

      <!--==== Third div begins here ====--->
      <div class="container mx-auto bg-white shadow-xl">
        <div class="w-11/12 mx-auto">
          <div class="bg-white my-6">
            <table class="text-left w-full border-collapse"> <!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
              <thead>
                <tr>
                  <th class="py-4 px-6 bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">MSISDN</th>
                  <th class="py-4 px-6 text-center bg-purple-400 font-bold uppercase text-sm text-white border-b border-grey-light">POINTS</th>
                </tr>
              </thead>
              <tbody>
                <tr class="hover:bg-grey-lighter">
                  <td class="py-4 px-6 border-b border-grey-light">28679609009</td>
                  <td class="py-4 text-center px-6 border-b border-grey-light">
                    11,290
                  </td>
                </tr>
                <tr class="hover:bg-grey-lighter">
                  <td class="py-4 px-6 border-b border-grey-light">28679609009</td>
                  <td class="py-4 text-center px-6 border-b border-grey-light">
                    9,230
                  </td>
                </tr>
                <tr class="hover:bg-grey-lighter">
                  <td class="py-4 px-6 border-b border-grey-light">28679609009</td>
                  <td class="py-4 px-6 text-center border-b border-grey-light">
                    234
                  </td>
                </tr>
                <tr class="hover:bg-grey-lighter">
                  <td class="py-4 px-6 border-b border-grey-light">28679609009</td>
                  <td class="py-4 px-6 text-center border-b border-grey-light">
                    56,230
                  </td>
                </tr>
                <tr class="hover:bg-grey-lighter">
                  <td class="py-4 px-6 border-b border-grey-light">28679609009</td>
                  <td class="py-4 px-6 text-center border-b border-grey-light">
                    323
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          </div>
            </div>
        <!--==== Third div ends here ====--->
    </div>
<!---------===================== SECOND ROW CONTAINING THE TABLE STATS ENDS HERE =============================-->

</body>
</html>

How to make a Dashboard stats 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 make a Dashboard stats component

  • flex
  • bg-gray-100
  • py-10
  • p-14
  • mx-auto
  • pr-4
  • w-72
  • bg-white
  • max-w-xs
  • overflow-hidden
  • h-20
  • bg-red-400
  • mr-0
  • text-white
  • text-lg
  • pl-5
  • px-5
  • pt-6
  • mb-2
  • text-sm
  • text-gray-600
  • py-4
  • text-3xl
  • ml-5
  • bg-blue-500
  • bg-purple-400
  • bg-purple-900
  • p-5
  • mr-5
  • ml-2
  • w-11/12
  • my-6
  • text-left
  • w-full
  • border-collapse
  • px-6
  • border-b
  • border-grey-light
  • text-center
  • hover:bg-grey-lighter

40 steps to make a Dashboard stats 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 vertical padding of an element to 2.5rem using the py-10 utilities.

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

  5. Control the horizontal margin of an element to auto using the mx-auto utilities.

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

  7. Use w-72 to set an element to a fixed width(18rem).

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

  9. Set the maximum width/height of an element using the max-w-xs utilities.

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

  11. Use h-20 to set an element to a fixed height(5rem).

  12. Control the background color of an element to red-400 using the bg-red-400 utilities.

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

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

  15. Control the text color of an element to lg using the text-lg utilities.

  16. Adjust the left padding of an element to 1.25rem using the pl-5 utilities class

  17. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  18. Control the padding on top side of an element to 1.5rem using the pt-6 utilities.

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

  20. Control the text color of an element to sm using the text-sm utilities.

  21. Control the text color of an element to gray-600 using the text-gray-600 utilities.

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

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

  24. Control the margin on left side of an element to 1.25rem using the ml-5 utilities.

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

  26. Control the background color of an element to purple-400 using the bg-purple-400 utilities.

  27. Control the background color of an element to purple-900 using the bg-purple-900 utilities.

  28. Control the padding on all sides of an element to 1.25rem using the p-5 utilities.

  29. Control the margin on right side of an element to 1.25rem using the mr-5 utilities.

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

  31. Use w-11/12 to set an element to a fixed width(11/12).

  32. Control the vertical margin of an element to 1.5rem using the my-6 utilities.

  33. Control the text color of an element to left using the text-left utilities.

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

  35. Control the border color of an element to collapse using the border-collapse utilities.

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

  37. Control the border color of an element to b using the border-b utilities.

  38. Control the border color of an element to grey-light using the border-grey-light utilities.

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

  40. Control the background color of an element to grey-lighter using the hover:bg-grey-lighter utilities on hover.

Conclusion

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