Published on

6 Ideas To Help You Create A Goals With Tailwind CSS Like A Pro

Tags
TablesWidget
Goals

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps you quickly build custom designs. It provides a set of pre-defined classes that you can use to style your HTML elements. With Tailwind CSS, you can create complex layouts and designs without writing any custom CSS.

The description of Goals ui component

Goals are an essential part of life. They help us stay focused and motivated, and they give us a sense of purpose. A Goals UI component is a visual representation of our goals. It usually consists of a progress bar, a title, and a description.

Why use Tailwind CSS to create a Goals ui component?

Tailwind CSS is an excellent choice for creating a Goals UI component because it provides a set of pre-defined classes that you can use to style your elements. It also allows you to customize your styles easily by modifying the configuration file.

The preview of Goals ui component

To create a Goals UI component with Tailwind CSS, you can use the following classes:

  • bg-gray-200: sets the background color of the progress bar to gray.
  • h-2: sets the height of the progress bar to 2 pixels.
  • w-full: sets the width of the progress bar to 100%.
  • rounded-full: rounds the corners of the progress bar.
  • bg-green-500: sets the color of the progress bar to green.
  • text-lg: sets the font size of the title to large.
  • font-bold: sets the font weight of the title to bold.
  • mt-4: adds margin to the top of the Goals UI component.

Free download of the Goals's source code

The source code of Goals ui component

To create a Goals UI component with Tailwind CSS, you can use the following HTML code:

<div class="bg-gray-200 h-2 w-full rounded-full">
  <div class="bg-green-500 h-2 rounded-full" style="width: 50%;"></div>
</div>
<h2 class="text-lg font-bold mt-4">My Goal</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ante euismod, ullamcorper dolor a, bibendum nunc. Donec ac magna vel leo aliquet consequat.</p>

<!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8">
                <title>Tailwind.run Export | new / 0</title>
                <link rel="stylesheet" href="tailwind.out.css">
                <!-- <link rel="stylesheet" href="tailwind.purged.css"> -->
              </head>
              <body>
                <div class="bg-indigo-700 px-4 py-5 border-b rounded-t sm:px-6">
                  <h3 class="text-lg leading-6 font-medium text-white">
                    Your Goals
                  </h3>
                </div>
                <div class="bg-white shadow overflow-hidden sm:rounded-md">
                  <ul class="divide-y divide-gray-200">
                    <li>
                      <a class="block hover:bg-gray-50">
                        <div class="px-4 py-4 sm:px-6">
                          <div class="flex items-center justify-between">
                            <p class="text-sm font-thin text-gray-700 truncate">
                              Increase sales by 10% year over year
                            </p>
                            <div class="ml-2 flex-shrink-0 flex">
                              <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                On-Track
                              </p>
                            </div>
                          </div>
                          <div class="mt-2 sm:flex sm:justify-between">
                            <div class="sm:flex">
                              <p class="flex items-center text-sm font-light text-gray-500">
                                <time datetime="2020-01-07">January 7, 2020</time>
                              </p>
                            </div>
                          </div>
                        </div>
                      </a>
                    </li>
                
              <li>
                      <a class="block hover:bg-gray-50">
                        <div class="px-4 py-4 sm:px-6">
                          <div class="flex items-center justify-between">
                            <p class="text-sm font-thin text-gray-700 truncate">
                              Increase newsletter subscribers by 500
                            </p>
                            <div class="ml-2 flex-shrink-0 flex">
                              <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                At-Risk
                              </p>
                            </div>
                          </div>
                          <div class="mt-2 sm:flex sm:justify-between">
                            <div class="sm:flex">
                              <p class="flex items-center text-sm font-light text-gray-500">
                                <time datetime="2020-01-07">January 7, 2020</time>
                              </p>
                            </div>
                          </div>
                        </div>
                      </a>
                    </li>
                
             <li>
                      <a class="block hover:bg-gray-50">
                        <div class="px-4 py-4 sm:px-6">
                          <div class="flex items-center justify-between">
                            <p class="text-sm font-thin text-gray-700 truncate">
                              Increase customer satisfaction rating by 10 points 
                            </p>
                            <div class="ml-2 flex-shrink-0 flex">
                              <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                On-Track
                              </p>
                            </div>
                          </div>
                          <div class="mt-2 sm:flex sm:justify-between">
                            <div class="sm:flex">
                              <p class="flex items-center text-sm font-light text-gray-500">
                                <time datetime="2020-01-07">January 7, 2020</time>
                              </p>
                            </div>
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
            <button type="button" class="inline-flex items-center m-4 px-4 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              View All
            </button>      
                </div>
              </body>

How to create a Goals with Tailwind CSS?

Here are six ideas to help you create a Goals UI component with Tailwind CSS like a pro:

1. Use the bg-gray-200 class to set the background color of the progress bar.

<div class="bg-gray-200 h-2 w-full rounded-full">

2. Use the h-2 class to set the height of the progress bar.

<div class="bg-gray-200 h-2 w-full rounded-full">

3. Use the w-full class to set the width of the progress bar.

<div class="bg-gray-200 h-2 w-full rounded-full">

4. Use the rounded-full class to round the corners of the progress bar.

<div class="bg-gray-200 h-2 w-full rounded-full">

5. Use the bg-green-500 class to set the color of the progress bar.

<div class="bg-gray-200 h-2 w-full rounded-full">
  <div class="bg-green-500 h-2 rounded-full" style="width: 50%;"></div>
</div>

6. Use the text-lg and font-bold classes to style the title.

<h2 class="text-lg font-bold mt-4">My Goal</h2>

You can also add a description to your Goals UI component by using the mt-2 class to add margin to the top of the description.

<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ante euismod, ullamcorper dolor a, bibendum nunc. Donec ac magna vel leo aliquet consequat.</p>

Conclusion

In conclusion, Tailwind CSS is an excellent choice for creating a Goals UI component. It provides a set of pre-defined classes that you can use to style your elements, and it allows you to customize your styles easily by modifying the configuration file. By following the six ideas outlined in this article, you can create a Goals UI component with Tailwind CSS like a pro.