Published on

How To Create A Freelance Projects Dashboard With Tailwind CSS In 6 Easy Steps?

Tags
CardsPages
Freelance Projects 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 Freelance Projects Dashboard ui component

dribbble.com/shots/10977400-freelance-projects-dashboard

Why use Tailwind CSS to create a Freelance Projects Dashboard ui component?

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

The preview of Freelance Projects Dashboard ui component

Free download of the Freelance Projects Dashboard's source code

The source code of Freelance Projects Dashboard ui component

<body>
        <!-- https://dribbble.com/shots/10977400-Freelance-Projects-Dashboard -->
        <div class="bg-gray-200 min-h-screen flex justify-center items-center shadow-xl">
            <div class="flex flex-col lg:flex-row w-full justify-center gap-7">
                <div class="bg-white w-full lg:w-1/3 p-10 rounded-lg order-2 lg:order-first">
                    <h1 class="text-gray-700 font-bold tracking-wider">Upgrade your plan</h1>
                    <p class="text-gray-500 mt-4">Please make the payment to start enjoying all the features of our premium plan as soon as possible.</p>

                    <div class="flex my-10 border-2 border-blue-700 rounded-sm p-5 bg-blue-50 justify-between items-center">
                        <div class="flex justify-start gap-5 items-center">
                            <div class="w-20 h-20 bg-blue-700 rounded-lg"></div>
                            <div>
                                <h1 class="font-bold tracking-wider text-gray-700">Small Business</h1>
                                <span class="tracking-wider uppercase text-xs text-blue-700 font-bold">change plan</span>
                            </div>
                        </div>
                        <div>
                            <span class="text-gray-500">$</span> <span class="text-3xl">8,350 </span> <span class="text-gray-500">/ year</span>
                        </div>
                    </div>

                    <h1 class="text-gray-700 font-bold tracking-wider">Payment details</h1>
                    <div class="my-10">
                        <div class="flex justify-between items-center">
                            <div class="flex justify-items-start gap-3 items-stretch">
                                <div class="bg-gray-200 w-14"></div>
                                <div>
                                    <h1 class="font-bold text-gray-700">Credit card</h1>
                                    <p class="text-sm text-gray-500">2344 xxxx xxxx xxxx 4444</p>
                                </div>
                            </div>
                            <div>
                                <input type="text" placeholder="cvc" class="w-20 border-2 border-gray-300 outline-none rounded-sm px-4 py-2 focus:border-blue-600"/>
                            </div>
                        </div>
                        <div class="flex justify-between items-center mt-5">
                            <div class="flex justify-items-start gap-3 items-stretch">
                                <div class="bg-gray-200 w-14"></div>
                                <div>
                                    <h1 class="font-bold text-gray-700">Credit card</h1>
                                    <p class="text-sm text-gray-500">2344 xxxx xxxx xxxx 4444</p>
                                </div>
                            </div>
                            <div>
                                <input type="text" placeholder="cvc" class="w-20 border-2 border-gray-300 outline-none rounded-sm px-4 py-2 focus:border-blue-600"/>
                            </div>
                        </div>
                    </div>

                    <h1 class="uppercase font-bold tracking-widest text-blue-600 text-sm">Add payment method</h1>

                    <input type="text" class="w-full outline-none border-2 border-gray-300 py-3 pl-5 rounded-sm mt-4" placeholder="Email Address"/>

                    <button class="w-full rounded-sm py-7 mt-7 text-center bg-blue-600 text-white font-bold tracking-wider">Procced to Payment    &rarr;</button>
                </div>
                <div class="w-full lg:w-1/5 order-1 lg:order-last flex flex-col justify-start gap-7">
                    <div class="bg-white p-2 rounded-lg text-center">
                        <img src="https://i.ytimg.com/vi/mtXQ-m2xPEY/maxresdefault.jpg" alt="" class="h-20 w-full object-cover content-center rounded-t-lg"/>
                        <div class="flex justify-center">
                            <img src="https://img.freepik.com/free-photo/handsome-confident-smiling-man-with-hands-crossed-chest_176420-18743.jpg?size=626&ext=jpg" alt="" class="w-20 h-20 rounded-full object-cover content-center -mt-10 border-4 border-white"/>
                        </div>
                        <h1 class="text-center font-bold tracking-wider text-gray-700 mt-4">Filip Martin Jose</h1>
                        <p class="text-gray-500 mt-1 text-center">Los Angeles</p>
                        <br/>
                        <button class="bg-blue-700 py-2 px-4 rounded-full text-white text-sm font-semibold">Pro Level</button>

                        <div class="mt-5 flex justify-between mx-10 mb-5">
                            <div class="text-left">
                                <h1 class="text-gray-500">Followers</h1>
                                <p class="text-3xl text-gray-800">980</p>
                            </div>
                            <div class="text-left">
                                <h1 class="text-gray-500">Projects</h1>
                                <p class="text-3xl text-gray-800">142</p>
                            </div>
                            <div class="text-left">
                                <h1 class="text-gray-500">Rank</h1>
                                <p class="text-3xl text-gray-800">12</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-6">
                        <h1 class="font-bold tracking-wider text-gray-800">Set up your pricing</h1>
                        <p class="text-sm text-gray-500 mt-2">Please set up your hourly or fixed rate so that the client is aware of your pricing</p>
                        <div class="my-4 flex justify-between gap-5">
                            <div class="border-2 border-blue-400 rounded-lg py-2  w-full text-gray-700 text-center">
                                Hourly
                            </div>
                            <div class="border-2 border-gray-200 rounded-lg py-2 w-full  text-gray-700 text-center">
                                Fixed
                            </div>
                        </div>

                        <span class="text-gray-400">$</span> <span class="text-2xl text-black">180</span><span class="text-gray-400"> / hour</span>

                        <div class="mt-3 w-full border-t-4 border-gray-300 rounded-full relative">
                            <div class="w-4/5 absolute left-0 -top-1 border-t-4 border-blue-600 rounded-full">
                                <div class="absolute w-5 h-5 bg-blue-600 rounded-full top-0 bottom-0 my-auto -right-1 ring-1 ring-blue-600 ring-offset-2 ring-offset-white">
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>$20</span>
                            <span>$300</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

How to create a Freelance Projects 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 Freelance Projects Dashboard component

  • bg-gray-200
  • min-h-screen
  • flex
  • flex-col
  • lg:flex-row
  • w-full
  • gap-7
  • bg-white
  • lg:w-1/3
  • p-10
  • text-gray-700
  • text-gray-500
  • mt-4
  • my-10
  • border-2
  • border-blue-700
  • p-5
  • bg-blue-50
  • justify-start
  • gap-5
  • w-20
  • h-20
  • bg-blue-700
  • text-xs
  • text-blue-700
  • text-3xl
  • gap-3
  • w-14
  • text-sm
  • border-gray-300
  • px-4
  • py-2
  • focus:border-blue-600
  • mt-5
  • text-blue-600
  • py-3
  • pl-5
  • py-7
  • mt-7
  • text-center
  • bg-blue-600
  • text-white
  • lg:w-1/5
  • p-2
  • -mt-10
  • border-4
  • border-white
  • mt-1
  • mx-10
  • mb-5
  • text-left
  • text-gray-800
  • p-6
  • mt-2
  • my-4
  • border-blue-400
  • border-gray-200
  • text-gray-400
  • text-2xl
  • text-black
  • mt-3
  • border-t-4
  • relative
  • w-4/5
  • absolute
  • left-0
  • -top-1
  • border-blue-600
  • w-5
  • h-5
  • top-0
  • bottom-0
  • my-auto
  • -right-1

74 steps to create a Freelance Projects Dashboard component with Tailwind CSS

  1. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  2. Set the minimum width/height of an element using the min-h-screen utilities.

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

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

  5. Use flex to create a block-level flex container at only large screen sizes.

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

  7. To specify the width between columns, you can use the gap-7 utilities.

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

  9. Use lg:w-1/3 to set an element to a fixed width(1/3) at only large screen sizes.

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

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

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

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

  14. Control the vertical margin of an element to 2.5rem using the my-10 utilities.

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

  16. Control the border color of an element to blue-700 using the border-blue-700 utilities.

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

  18. Control the background color of an element to blue-50 using the bg-blue-50 utilities.

  19. Use justify-start to justify items against the start of the container’s main axis.

  20. To specify the width between columns, you can use the gap-5 utilities.

  21. Use w-20 to set an element to a fixed width(5rem).

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

  23. Control the background color of an element to blue-700 using the bg-blue-700 utilities.

  24. Control the text color of an element to xs using the text-xs utilities.

  25. Control the text color of an element to blue-700 using the text-blue-700 utilities.

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

  27. To specify the width between columns, you can use the gap-3 utilities.

  28. Use w-14 to set an element to a fixed width(3.5rem).

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

  30. Control the border color of an element to gray-300 using the border-gray-300 utilities.

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

  32. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  33. Control the border color of an element to blue-600 using the focus:border-blue-600 utilities on focus.

  34. Control the margin on top side of an element to 1.25rem using the mt-5 utilities.

  35. Control the text color of an element to blue-600 using the text-blue-600 utilities.

  36. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  37. Set the left padding of the element to 1.25rem using the pl-5 utilities class

  38. Control the vertical padding of an element to 1.75rem using the py-7 utilities.

  39. Control the margin on top side of an element to 1.75rem using the mt-7 utilities.

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

  41. Control the background color of an element to blue-600 using the bg-blue-600 utilities.

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

  43. Use lg:w-1/5 to set an element to a fixed width(1/5) at only large screen sizes.

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

  45. Control the margin on top side of an element to -2.5rem using the -mt-10 utilities.

  46. Control the border color of an element to 1rem using the border-4 utilities.

  47. Control the border color of an element to white using the border-white utilities.

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

  49. Control the horizontal margin of an element to 2.5rem using the mx-10 utilities.

  50. Control the margin on bottom side of an element to 1.25rem using the mb-5 utilities.

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

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

  53. Control the padding on all sides of an element to 1.5rem using the p-6 utilities.

  54. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  55. Control the vertical margin of an element to 1rem using the my-4 utilities.

  56. Control the border color of an element to blue-400 using the border-blue-400 utilities.

  57. Control the border color of an element to gray-200 using the border-gray-200 utilities.

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

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

  60. Control the text color of an element to black using the text-black utilities.

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

  62. Control the border color of an element to t-4 using the border-t-4 utilities.

  63. Use relative to position an element according to the normal flow of the document.

  64. Use w-4/5 to set an element to a fixed width(4/5).

  65. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  66. Use the left-0 utilities to set the left position of a positioned element to 0rem.

  67. Use the -top-1 utilities to set the top position of a positioned element to -0.25rem.

  68. Control the border color of an element to blue-600 using the border-blue-600 utilities.

  69. Use w-5 to set an element to a fixed width(1.25rem).

  70. Use h-5 to set an element to a fixed height(1.25rem).

  71. Use the top-0 utilities to set the top position of a positioned element to 0rem.

  72. Use the bottom-0 utilities to set the bottom position of a positioned element to 0rem.

  73. Control the vertical margin of an element to auto using the my-auto utilities.

  74. Use the -right-1 utilities to set the right position of a positioned element to -0.25rem.

Conclusion

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