Published on

Advanced Guide: Make A Task Widget With Tailwind CSS

Tags
CardsWidget
Task Widget

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps you create custom designs quickly. It provides a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is highly customizable, and you can configure it to suit your specific needs.

The description of Task Widget ui component

A task widget is a user interface component that displays a list of tasks that a user needs to complete. It is a common feature in many web applications, especially those that involve project management or task tracking. A task widget usually displays the task name, description, due date, and status.

Why use Tailwind CSS to create a Task Widget ui component?

Tailwind CSS is an excellent choice for creating a task widget UI component because it provides a wide range of pre-defined classes that you can use to style your elements. This saves you a lot of time and effort that you would otherwise spend writing custom CSS. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the styles to match your project's branding or design requirements.

The preview of Task Widget ui component

To give you an idea of what a task widget UI component looks like, here's a preview:

Free download of the Task Widget's source code

The source code of Task Widget ui component

Here's the source code for a basic task widget UI component:

<!-- Created By Eza Alfandy -->
<div class="min-h-screen bg-gray-100 flex justify-center items-center">
    <div class="flex flex-col bg-gradient-to-r from-blue-500 via-purple-500 to-purple-600 p-4 rounded-xl text-white w-8/12 mx-auto my-auto">
        <div>
            <span class="text-xs">Rizky Design Team</span>
        </div>
        <div>
            <p class="text-xl font-bold mt-3 mb-5">Cryptoku landing page</p>
        </div>

        <div class="mb-10 relative">
            <img src="https://source.unsplash.com/ILip77SbmOE/900x900" class="w-8 rounded-full border-2 float-left absolute">
            <img src="https://source.unsplash.com/ILip77SbmOE/900x900" class="w-8 rounded-full border-2 float-left absolute left-5">
            <img src="https://source.unsplash.com/ILip77SbmOE/900x900" class="w-8 rounded-full border-2 float-left absolute left-10">
            <img src="https://source.unsplash.com/ILip77SbmOE/900x900" class="w-8 rounded-full border-2 float-left absolute left-14">
        </div>
        <div class="text-xs mb-2">
            5/12 Task Completed
        </div>
        <div class="w-full bg-gray-400 p-0">
            <div class="w-5/12 bg-white h-1">

            </div>
        </div>
    </div>
</div>

How to create a Task Widget with Tailwind CSS?

Now that you have an idea of what a task widget UI component looks like and what its source code looks like, let's dive into how to create one using Tailwind CSS.

Step 1: Set up your HTML structure

The first step is to set up your HTML structure. Here's an example:

<div class="task-widget">
  <div class="task">
    <div class="task-header">
      <h3 class="task-title">Task 1</h3>
      <span class="task-status">Incomplete</span>
    </div>
    <div class="task-body">
      <p class="task-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec elit euismod, malesuada felis vel, tempor ipsum.</p>
      <span class="task-due-date">Due: 10/10/2021</span>
    </div>
  </div>
</div>

In this example, we've created a div element with a class of task-widget. Inside the task-widget element, we've created another div element with a class of task. Inside the task element, we've created two more div elements: one with a class of task-header and one with a class of task-body. Inside the task-header element, we've added a h3 element with a class of task-title and a span element with a class of task-status. Inside the task-body element, we've added a p element with a class of task-description and a span element with a class of task-due-date.

Step 2: Add Tailwind CSS classes

The next step is to add Tailwind CSS classes to your HTML elements. Here's an example:

<div class="task-widget">
  <div class="task bg-white rounded-lg shadow-md mb-4">
    <div class="task-header bg-gray-200 rounded-t-lg px-4 py-2 flex justify-between items-center">
      <h3 class="task-title text-gray-700 font-bold">Task 1</h3>
      <span class="task-status bg-red-500 text-white py-1 px-2 rounded-full text-sm">Incomplete</span>
    </div>
    <div class="task-body px-4 py-2">
      <p class="task-description text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec elit euismod, malesuada felis vel, tempor ipsum.</p>
      <span class="task-due-date text-gray-500 text-sm">Due: 10/10/2021</span>
    </div>
  </div>
</div>

In this example, we've added Tailwind CSS classes to our HTML elements. We've added the bg-white, rounded-lg, and shadow-md classes to the task element to give it a white background, rounded corners, and a shadow effect. We've added the bg-gray-200, rounded-t-lg, px-4, and py-2 classes to the task-header element to give it a light gray background, rounded top corners, and some padding. We've added the flex, justify-between, and items-center classes to the task-header element to make its child elements align horizontally and vertically. We've added the text-gray-700 and font-bold classes to the task-title element to make it bold and dark gray. We've added the bg-red-500, text-white, py-1, px-2, rounded-full, and text-sm classes to the task-status element to give it a red background, white text, rounded corners, and some padding. We've added the text-gray-600 class to the task-description element to make its text gray. We've added the text-gray-500 and text-sm classes to the task-due-date element to make its text light gray and small.

Step 3: Repeat for each task

The final step is to repeat steps 1 and 2 for each task that you want to display in your task widget. Here's an example:

<div class="task-widget">
  <div class="task bg-white rounded-lg shadow-md mb-4">
    <div class="task-header bg-gray-200 rounded-t-lg px-4 py-2 flex justify-between items-center">
      <h3 class="task-title text-gray-700 font-bold">Task 1</h3>
      <span class="task-status bg-red-500 text-white py-1 px-2 rounded-full text-sm">Incomplete</span>
    </div>
    <div class="task-body px-4 py-2">
      <p class="task-description text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec elit euismod, malesuada felis vel, tempor ipsum.</p>
      <span class="task-due-date text-gray-500 text-sm">Due: 10/10/2021</span>
    </div>
  </div>

  <div class="task bg-white rounded-lg shadow-md mb-4">
    <div class="task-header bg-gray-200 rounded-t-lg px-4 py-2 flex justify-between items-center">
      <h3 class="task-title text-gray-700 font-bold">Task 2</h3>
      <span class="task-status bg-green-500 text-white py-1 px-2 rounded-full text-sm">Complete</span>
    </div>
    <div class="task-body px-4 py-2">
      <p class="task-description text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec elit euismod, malesuada felis vel, tempor ipsum.</p>
      <span class="task-due-date text-gray-500 text-sm">Due: 10/15/2021</span>
    </div>
  </div>
</div>

In this example, we've repeated steps 1 and 2 for two tasks: Task 1 and Task 2.

Conclusion

In this article, we've learned how to create a task widget UI component using Tailwind CSS. We've seen how Tailwind CSS can save us time and effort when styling our elements, and we've learned how to use its pre-defined classes to create a task widget. With this knowledge, you can now create your own task widgets and customize them to suit your project's needs.