Published on

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

Freelance Projects Dashboard

As a freelancer, managing your projects can be a daunting task. However, with the right tools, you can make the process much easier. In this tutorial, we will show you how to create a Freelance Projects Dashboard using Tailwind CSS in just six easy steps.

What is Tailwind CSS?

Tailwind CSS is a popular utility-first CSS framework that allows you to create responsive and customizable user interfaces quickly. It provides a set of pre-defined classes that you can use to style your HTML elements without writing any custom CSS.

The description of Freelance Projects Dashboard ui component

The Freelance Projects Dashboard is a user interface component that allows freelancers to manage their projects in one place. It provides an overview of all the projects, their status, and the amount of time spent on each project. The dashboard also allows freelancers to add new projects, edit existing ones, and delete completed projects.

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

Tailwind CSS is an excellent choice for creating a Freelance Projects Dashboard because it provides a set of pre-defined classes that you can use to style your dashboard quickly. This means that you can focus on the functionality of your dashboard rather than spending time on the design.

The preview of Freelance Projects Dashboard ui component

To give you an idea of what the Freelance Projects Dashboard will look like, here is a preview of the final product:

Free download of the Freelance Projects Dashboard's source code

The source code of Freelance Projects Dashboard ui component

If you want to create your own Freelance Projects Dashboard, you can use the following source code as a starting point:

<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?

Now that you have an idea of what the Freelance Projects Dashboard looks like and what the source code looks like, let's dive into the six easy steps to create your own dashboard using Tailwind CSS.

Step 1: Set up your project

The first step is to set up your project. You can do this by creating a new HTML file and linking to the Tailwind CSS stylesheet. You can also add a div with an ID of "app" to your HTML file. This is where we will render our dashboard.

Step 2: Create the header

The next step is to create the header of our dashboard. We can do this by adding a div with a class of "bg-white" and "shadow" to our HTML file. We can also add a logo and a title to the header.

Step 3: Create the project list

The project list is where we will display all of our projects. We can create this by adding a table to our HTML file and using Tailwind CSS classes to style the table and its contents.

Step 4: Create the project form

The project form is where we will add new projects to our dashboard. We can create this by adding a form to our HTML file and using Tailwind CSS classes to style the form and its contents.

Step 5: Create the project details modal

The project details modal is where we will display the details of each project. We can create this by adding a modal to our HTML file and using Tailwind CSS classes to style the modal and its contents.

Step 6: Add interactivity with JavaScript

The final step is to add interactivity to our dashboard using JavaScript. We can do this by adding event listeners to our HTML elements and using JavaScript to update the contents of our dashboard dynamically.

Conclusion

In this tutorial, we showed you how to create a Freelance Projects Dashboard using Tailwind CSS in just six easy steps. We hope that you found this tutorial helpful and that it inspires you to create your own custom dashboards using Tailwind CSS.