Hello, coding enthusiasts! Are you ready for an exciting coding adventure to build an impressive project management dashboard using the versatile Tailwind CSS? In this tutorial, we’ll guide you step-by-step to create a dynamic dashboard with a captivating design using this popular CSS framework.
Getting Started: | Tailwind
1. Project Preparation: – To kickstart your journey, begin by creating a new folder on your computer to ensure optimal organization of your project. – Within the folder, create two essential files: “index.html” and “style.css”.
2. HTML Structure: – Now, open the “index.html” file in your preferred text editor and commence constructing the solid foundation of your project by creating the necessary HTML structure. – Incorporate vital tags such as <html>, <head>, and <body> to establish the basic structure of your web page.
3. Connecting Tailwind CSS: – To unlock the full potential of Tailwind CSS, establish a connection between the CSS framework and your “index.html” file by skillfully adding a special <link> tag. – By including this tag, you gain access to the impressive array of features and functionalities offered by Tailwind CSS.
Creating the Dashboard | Tailwind
4. Designing User Interface: – Let your creativity shine as you bring your project management dashboard to life! Enhance the user experience by seamlessly integrating search boxes, lists, and icons, providing an intuitive and efficient interface. – These user-friendly elements will significantly contribute to the overall usability and appeal of your dashboard.
5. Customization with Tailwind CSS: – Tailwind CSS truly empowers you to personalize every aspect of your dashboard. Utilize the extensive range of CSS properties and classes offered by this remarkable framework to meticulously craft a visually stunning and professionally polished dashboard. – Effortlessly apply custom styles to each element, elevating the aesthetic appeal and ensuring a cohesive and harmonious design.
Implementing Functionality: | Tailwind
6. Tutorial Video Instructions: – Delve into our comprehensive tutorial video, meticulously crafted to guide you through each step of implementing the crucial functionality of your project management dashboard. – Our video provides detailed visual examples and clear explanations, simplifying the implementation process and enabling you to follow along seamlessly.
7. Comparing with Source Code: – An invaluable aspect of the learning process is to compare your own code with the provided source code. This critical step allows you to identify any potential errors or discrepancies and make the necessary adjustments. – By closely examining the source code, you gain valuable insights into best practices and efficient coding techniques, ensuring the optimal performance of your dashboard.
Testing and Deployment: | Tailwind
8. Cross-Browser Testing: – Ensure optimal user experience across various browsers and devices by conducting thorough cross-browser testing. This essential step guarantees that your project management dashboard functions flawlessly and seamlessly adapts to different screen sizes. – By addressing any compatibility issues, you guarantee a consistent and delightful user experience for all visitors.
9. Finalize and Share: – Once you are satisfied with the functionality and visual appeal of your project management dashboard, it’s time to share your creation with the world. Publish it online, allowing your friends, colleagues, and potential employers to admire and appreciate your exceptional coding skills. – Sharing your work demonstrates your proficiency and dedication, and it also serves as a valuable addition to your portfolio.
Conclusion:
Embrace this exhilarating journey of creating a remarkable project management dashboard using the power and versatility of Tailwind CSS. Enjoy the process of building a visually stunning and highly functional interface that showcases your coding prowess.
Video Tutorial
Source Codes
index.html
<!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.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
pri: {
500: "#da373d",
},
sec: {
100:"#f1f1f1",
200:"#ccc",
300:"#777",
400:"#333",
800:"#211F1D"
},
white:"#fff",
green:"#3FDBA9",
blue:"#385CC4",
yellow:"#FFB13C",
},
},
},
};
</script>
</head>
<body>
<div class="flex h-screen overflow-y-hidden">
<div class="w-60 bg-sec-800 p-4 text-white">
<h2 class="text-2xl py-2 mb-5 font-bold text-center " >Project MGR</h2>
<div class="flex flex-col justify-between" style="height: calc(100vh - 100px);">
<div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-dashboard-line text-lg"></i> <p>Dashboard</p>
</div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-pie-chart-line text-lg"></i> <p>Projects</p>
</div>
<div class="flex items-center gap-2 p-2 bg-pri-500 cursor-pointer rounded-md">
<i class="ri-file-list-2-line text-lg"></i> <p>Task list</p>
</div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-expand-left-right-line text-lg"></i> <p>Services</p>
</div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-notification-3-line text-lg"></i><p>Notifications</p>
</div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-question-line text-lg"></i> <p>Help</p>
</div>
</div>
<div >
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-settings-3-line"></i> <p>Settings</p>
</div>
<div class="flex items-center gap-2 p-2 hover:bg-pri-500 cursor-pointer rounded-md">
<i class="ri-logout-box-line text-lg"></i> <p>Logout</p>
</div>
</div>
</div>
</div>
<div class="w-full bg-sec-200">
<div class="p-4 flex items-center justify-between bg-white">
<div class=" flex items-center gap-3">
<div class="relative h-10 w-10 rounded-full overflow-hidden">
<img src="./avatar.png" class="absolute top-0 left-0 w-full h-full object-cover"/>
</div>
<div>
<h3 class="text-xl text-sec-400">Balachandran sinthujan</h3>
<p class="text-sec-300 -mt-2">Projecct manager</p>
</div>
</div>
<div class="flex items-center gap-5">
<div class="bg-sec-100 py-2 px-5 rounded-md mr-24"><input class="bg-inherit outline-none w-96" placeholder="Search anything.."/> </div>
<div class="bg-sec-100 h-10 w-10 rounded-full flex items-center justify-center"><i class="ri-notification-line"></i></div>
<div class="bg-sec-100 h-10 w-10 rounded-full flex items-center justify-center"><i class="ri-message-2-line"></i></i></div>
</div>
</div>
<div class="grid grid-cols-3 p-4 gap-4 items-start">
<div class="col-span-2 bg-white rounded-md overflow-hidden">
<div>
<div class="flex items-center justify-between p-4 ">
<div>
<h2 class="text-3xl font-semibold text-sec-400">
Last tasks
</h2>
<p class="text-sec-300">
<span class="font-semibold text-sec-400">124 total,</span> proceed to
resolve them
</p>
</div>
<div class="flex items-center gap-10">
<div class="text-center">
<h2 class="text-3xl font-semibold text-sec-400">45</h2>
<p class="text-sec-300">Done</p>
</div>
<div class="text-center">
<h2 class="text-3xl font-semibold text-sec-400">21</h2>
<p class="text-sec-300">In progress</p>
</div>
</div>
</div>
<div class=" overflow-y-scroll px-4" style="height: calc(100vh - 200px);" >
<table class="w-full text-right">
<thead class="text-sec-400">
<tr class="border-b">
<th class="text-left">Name</th>
<th>Admin</th>
<th>Members</th>
<th>Status</th>
<th>Finish date</th>
</tr>
</thead >
<tbody class="text-sec-300 ">
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left ">State management </td>
<td>
Alan Das
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>3</td>
<td class="text-green">Done</td>
<td>25/05/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Products list page</td>
<td>
Sasikumar
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>3</td>
<td class="text-blue">In progress</td>
<td>25/05/2023</td>
</tr>
<tr class="h-10 bg-pri-500 text-white">
<td class="text-left">Protected routes</td>
<td>
John Smith
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>2</td>
<td>Todo</td>
<td>29/05/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Mapbox integration</td>
<td>
Karan sarma
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>6</td>
<td class="text-blue">In progress</td>
<td>31/05/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Single product integraton</td>
<td>
M.S.Yapa
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>2</td>
<td class="text-green">Done</td>
<td>02/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">About us page design</td>
<td>
Mullat Rao
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>3</td>
<td class="text-blue">In progress</td>
<td>04/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Image optimization</td>
<td>
Kaleel Ahamed
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>3</td>
<td class="text-blue">In progress</td>
<td>05/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">QA initial testing</td>
<td>
Mannen Kuban
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>12</td>
<td>Todo</td>
<td>11/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Address varification</td>
<td>
Kumst Ganapathy
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>4</td>
<td>Todo</td>
<td>12/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Code optimization</td>
<td>
Athar Doe
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>4</td>
<td class="text-green">Done</td>
<td>12/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Best practices</td>
<td>
Cumil Dumil
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>3</td>
<td>Todo</td>
<td>18/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Split variables</td>
<td>
John Doe
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>2</td>
<td class="text-blue">In progress</td>
<td>14/06/2023</td>
</tr>
<tr class="h-10 hover:bg-pri-500 hover:text-white">
<td class="text-left">Debug email varificaion</td>
<td>
Arjun Kumar
<i class="ri-message-2-line text-green"></i>
</span>
</td>
<td>1</td>
<td class="text-blue">In progress</td>
<td>14/06/2023</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bg-white rounded-md relative overflow-y-hidden" style="height: calc(100vh - 110px);">
<div class=" rounded-md bg-sec-100 m-4 py-5">
<div class="relative h-16 w-16 rounded-full overflow-hidden mx-auto">
<img src="john.png" class="absolute w-full h-full top-0 left-0 object-cover"/> </div>
<h3 class="text-center font-semibold text-lg text-sec-400 mt-2">John Smith</h3>
<p class="text-center text-sec-300 -mt-1">@peppynestadmin24</p>
<div class="flex items-center justify-center gap-4 mt-3">
<div class="bg-white h-8 w-8 rounded-full flex items-center justify-center"><i class="ri-phone-line"></i></div>
<div class="bg-white h-8 w-8 rounded-full flex items-center justify-center"><i class="ri-vidicon-line"></i></div>
<div class="bg-white h-8 w-8 rounded-full flex items-center justify-center"><i class="ri-more-2-fill"></i></div>
</div>
</div>
<div class="mt-5 overflow-y-scroll px-4" style="height: calc(100vh - 400px);">
<div class="p-2 bg-pri-500 text-white w-56 ml-auto rounded-md rounded-br-none mb-4">
Hi, What about the progress? Is there any issues?
</div>
<div class="p-2 bg-blue text-white w-56 mr-auto rounded-md rounded-bl-none mb-4">
No issues. working great. I can submit it today.
</div>
<div class="p-2 bg-pri-500 text-white w-56 ml-auto rounded-md rounded-br-none mb-4">
Very nice. Let's have a call evening.
</div>
<div class="p-2 bg-blue text-white w-56 mr-auto rounded-md rounded-bl-none mb-4">
Sure, let me know the time.
</div>
<div class="p-2 bg-pri-500 text-white w-56 ml-auto rounded-md rounded-br-none mb-4">
5.00 pm
</div>
<div class="p-2 bg-blue text-white w-56 mr-auto rounded-md rounded-bl-none mb-4">
Sure, let me know the time.
</div>
<div class="p-2 bg-pri-500 text-white w-56 ml-auto rounded-md rounded-br-none mb-4">
5.00 pm
</div>
<div class="p-2 bg-blue text-white w-56 mr-auto rounded-md rounded-bl-none mb-4">
Sure, let me know the time.
</div>
<div class="p-2 bg-pri-500 text-white w-56 ml-auto rounded-md rounded-br-none mb-4">
5.00 pm
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-2 bg-white">
<div class=" flex items-center bg-sec-100 p-2 gap-2 rounded-md" >
<i class="ri-attachment-line"></i>
<input class="bg-inherit w-full outline-none" placeholder="Write a message">
<i class="ri-user-smile-line"></i>
<i class="ri-mic-line"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Style.css
.dad {
color: #da373c51;
}
Don’t forget to Subscribe to our YouTube Channel for more.
