Published on

3 Things You Must Know To Create A Simple statistics cards With Tailwind CSS

Tags
Cards
Simple statistics cards

In the world of web development, creating visually appealing UI components is essential to attract and retain users. One such UI component is the Simple Statistics Cards, which displays important data in a clean and concise manner. In this article, we will discuss how to create a Simple Statistics Cards using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build custom designs without writing any CSS code. It provides a set of pre-defined classes that can be used to style HTML elements. With Tailwind CSS, developers can create responsive and visually appealing UI components in a short amount of time.

The Description of Simple Statistics Cards UI Component

The Simple Statistics Cards UI component is a set of cards that display important data in a visually appealing way. Each card contains a title, a value, and an icon. The cards can be customized to display different types of data, such as revenue, sales, or website traffic.

Why Use Tailwind CSS to Create a Simple Statistics Cards UI Component?

Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements. This makes it easy to create a Simple Statistics Cards UI component without writing any CSS code. Additionally, Tailwind CSS provides responsive design classes that allow the component to look great on any device.

The Preview of Simple Statistics Cards UI Component

To create a Simple Statistics Cards UI component with Tailwind CSS, we will use a combination of HTML and Tailwind CSS classes. The resulting component will look something like this:

Free download of the Simple statistics cards's source code

The Source Code of Simple Statistics Cards UI Component

To create the Simple Statistics Cards UI component, we will use HTML and Tailwind CSS classes. The HTML code will define the structure of the component, while the Tailwind CSS classes will style the component. The resulting code will look something like this:

<div class="min-w-screen min-h-screen bg-gray-100 flex items-center justify-center bg-gray-100">
    <div class="max-w-7xl w-full mx-auto py-6 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">

            <div class="w-full lg:w-1/5">
                <div class="widget w-full p-4 rounded-lg bg-white border-l-4 border-purple-400">
                    <div class="flex items-center">
                        <div class="icon w-14 p-3.5 bg-purple-400 text-white rounded-full mr-3">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="text-lg">230k</div>
                            <div class="text-sm text-gray-400">Sales</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-1/5">
                <div class="widget w-full p-4 rounded-lg bg-white border-l-4 border-blue-400">
                    <div class="flex items-center">
                        <div class="icon w-14 p-3.5 bg-blue-400 text-white rounded-full mr-3">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="text-lg">3456</div>
                            <div class="text-sm text-gray-400">Customers</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-1/5">
                <div class="widget w-full p-4 rounded-lg bg-white border-l-4 border-yellow-400">
                    <div class="flex items-center">
                        <div class="icon w-14 p-3.5 bg-yellow-400 text-white rounded-full mr-3">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                            </svg>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="text-lg">3456</div>
                            <div class="text-sm text-gray-400">Products</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-1/5">
                <div class="widget w-full p-4 rounded-lg bg-white border-l-4 border-red-400">
                    <div class="flex items-center">
                        <div class="icon w-14 p-3.5 bg-red-400 text-white rounded-full mr-3">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="text-lg">12658</div>
                            <div class="text-sm text-gray-400">Orders</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-1/5">
                <div class="widget w-full p-4 rounded-lg bg-white border-l-4 border-green-400">
                    <div class="flex items-center">
                        <div class="icon w-14 p-3.5 bg-green-400 text-white rounded-full mr-3">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="text-lg">$948'560</div>
                            <div class="text-sm text-gray-400">Revenue</div>
                        </div>
                    </div>
                </div>
            </div>

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

How to Create a Simple Statistics Cards with Tailwind CSS?

To create a Simple Statistics Cards UI component with Tailwind CSS, follow these steps:

Step 1: Set up a new HTML file

Create a new HTML file and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Statistics Cards</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  </head>
  <body>
    <div class="container mx-auto mt-10">
      <!-- Add Simple Statistics Cards here -->
    </div>
  </body>
</html>

This code sets up a basic HTML file and includes the Tailwind CSS framework.

Step 2: Add the Simple Statistics Cards

Add the following code to the HTML file to create the Simple Statistics Cards:

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-indigo-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Revenue</p>
        <p class="text-xl font-semibold">$10,000</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-green-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Sales</p>
        <p class="text-xl font-semibold">100</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-red-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Website Traffic</p>
        <p class="text-xl font-semibold">10,000</p>
      </div>
    </div>
  </div>
</div>

This code creates three Simple Statistics Cards, each with a different icon and data.

Step 3: Style the Simple Statistics Cards

To style the Simple Statistics Cards, we will use Tailwind CSS classes. Add the following classes to the HTML code:

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-indigo-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Revenue</p>
        <p class="text-xl font-semibold">$10,000</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-green-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Sales</p>
        <p class="text-xl font-semibold">100</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex items-center">
      <div class="bg-red-500 rounded-full p-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </div>
      <div class="ml-4">
        <p class="text-gray-600 font-bold">Website Traffic</p>
        <p class="text-xl font-semibold">10,000</p>
      </div>
    </div>
  </div>
</div>

This code adds classes such as bg-white, rounded-lg, and shadow-lg to style the cards.

Step 4: Preview the Simple Statistics Cards

Save the HTML file and open it in a web browser to preview the Simple Statistics Cards.

Conclusion

Creating a Simple Statistics Cards UI component with Tailwind CSS is easy and efficient. By using pre-defined classes, developers can quickly create visually appealing and responsive UI components without writing any CSS code. With these three things in mind, you can create a Simple Statistics Cards UI component that will impress your users and provide them with important data in a clean and concise manner.