Published on

How To Make A Table Social With Tailwind CSS In 5 Easy Steps

Table Social

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that enables developers to quickly create custom designs without writing any CSS code. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind CSS is gaining popularity among developers due to its flexibility and ease of use.

The description of Table Social ui component

A Table Social is a UI component that displays a table of data with social media icons that allow users to share the data on their social media accounts. This component is commonly used in blogs, news websites, and other content-based websites.

Why use Tailwind CSS to create a Table Social 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 Table Social UI component without writing any CSS code. Additionally, Tailwind CSS is highly customizable, which means that developers can easily modify the styles of the component to match the design of their website.

The preview of Table Social ui component

To create a Table Social UI component with Tailwind CSS, we will use a table element with social media icons in the last column. The table will have a striped background and hover effects on rows.

Free download of the Table Social's source code

The source code of Table Social ui component

The source code for the Table Social UI component can be found below.

<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/styles/tailwind.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
 
 
 <section class="py-1 bg-blueGray-50">
 <div class="w-full xl:w-4/12 px-4 mx-auto mt-24">
    <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white ">
      <div class="rounded-t mb-0 px-4 py-3 border-0">
        <div class="flex flex-wrap items-center">
          <div class="relative w-full px-4 max-w-full flex-grow flex-1">
            <h3 class="font-semibold text-base text-blueGray-700">
              Social traffic
            </h3>
          </div>
          <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
            <button class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
              See all
            </button>
          </div>
        </div>
      </div>
      
      <div class="block w-full overflow-x-auto">
        <table class="items-center w-full border-collapse text-blueGray-700  ">
          <thead class="thead-light ">
            <tr>
              <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                Referral
              </th>
              <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                Visitors
              </th>
              <th class="px-6 bg-blueGray-50 text-blueGray-700 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                Facebook
              </th>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 ">
                1,480
              </td>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                <div class="flex items-center">
                  <span class="mr-2">60%</span>
                  <div class="relative w-full">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-red-200">
                      <div style="width: 60%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                Facebook
              </th>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                5,480
              </td>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                <div class="flex items-center">
                  <span class="mr-2">50%</span>
                  <div class="relative w-full">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
                      <div style="width: 50%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                Google
              </th>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                4,807
              </td>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                <div class="flex items-center">
                  <span class="mr-2">60%</span>
                  <div class="relative w-full">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
                      <div style="width: 60%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                Instagram
              </th>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                3,678
              </td>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                <div class="flex items-center">
                  <span class="mr-2">85%</span>
                  <div class="relative w-full">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200">
                      <div style="width: 85%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                twitter
              </th>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                2,645
              </td>
              <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                <div class="flex items-center">
                  <span class="mr-2">60%</span>
                  <div class="relative w-full">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-orange-200">
                      <div style="width: 60%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

<footer class="relative  pt-8 pb-6 mt-16">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center md:justify-between justify-center">
      <div class="w-full md:w-6/12 px-4 mx-auto text-center">
        <div class="text-sm text-blueGray-500 font-semibold py-1">
          Made with <a href="https://www.creative-tim.com/product/notus-js" class="text-blueGray-500 hover:text-gray-800" target="_blank">Notus JS</a> by <a href="https://www.creative-tim.com" class="text-blueGray-500 hover:text-blueGray-800" target="_blank"> Creative Tim</a>.
        </div>
      </div>
    </div>
  </div>
</footer>
</section>

How to create a Table Social with Tailwind CSS?

Follow these 5 easy steps to create a Table Social UI component with Tailwind CSS:

Step 1: Set up a new HTML document

Create a new HTML document and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Social with Tailwind CSS</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <table class="table-auto w-full">
    <thead>
      <tr>
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Age</th>
        <th class="px-4 py-2">Country</th>
        <th class="px-4 py-2">Share</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-gray-100 hover:bg-gray-200">
        <td class="border px-4 py-2">John Doe</td>
        <td class="border px-4 py-2">25</td>
        <td class="border px-4 py-2">USA</td>
        <td class="border px-4 py-2">
          <a href="#" class="text-blue-500 hover:text-blue-700">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-700 ml-2">
            <i class="fab fa-facebook"></i>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-700 ml-2">
            <i class="fab fa-linkedin"></i>
          </a>
        </td>
      </tr>
      <tr class="hover:bg-gray-200">
        <td class="border px-4 py-2">Jane Doe</td>
        <td class="border px-4 py-2">30</td>
        <td class="border px-4 py-2">Canada</td>
        <td class="border px-4 py-2">
          <a href="#" class="text-blue-500 hover:text-blue-700">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-700 ml-2">
            <i class="fab fa-facebook"></i>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-700 ml-2">
            <i class="fab fa-linkedin"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

In this code, we have added a table element with four columns: Name, Age, Country, and Share. The Share column contains social media icons that allow users to share the data on their social media accounts.

Step 2: Add Tailwind CSS classes

We have used Tailwind CSS classes to style the table and its elements. The classes used in this code are:

  • table-auto: This class sets the table layout to automatic.
  • w-full: This class sets the table width to 100%.
  • px-4: This class sets the padding on the left and right sides of the element to 1rem (16px).
  • py-2: This class sets the padding on the top and bottom sides of the element to 0.5rem (8px).
  • border: This class adds a border to the element.
  • bg-gray-100: This class sets the background color of the element to light gray (#f5f5f5).
  • hover:bg-gray-200: This class sets the background color of the element to a darker shade of gray (#e5e5e5) on hover.
  • text-blue-500: This class sets the text color of the element to blue (#4299e1).
  • hover:text-blue-700: This class sets the text color of the element to a darker shade of blue (#2b6cb0) on hover.
  • ml-2: This class adds a margin of 0.5rem (8px) to the left side of the element.

Step 3: Add Font Awesome icons

We have used Font Awesome icons to display social media icons in the Share column. To use Font Awesome icons, add the following code to the head section of your HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-8pZl5+Xm6m9wXG4n+7H2g8B7x9u7yvKtQzJ9w9L0R6hR1IcZz7pJ2gQ0l6pT8N1l3+6kz7XfQx0v5iZjZj6zQ==" crossorigin="anonymous" />

This code adds the Font Awesome CSS file to your HTML document.

Step 4: Preview the Table Social UI component

Open the HTML document in your web browser to preview the Table Social UI component. You should see a table with social media icons in the last column. The table should have a striped background and hover effects on rows.

Step 5: Customize the Table Social UI component

You can customize the Table Social UI component by modifying the Tailwind CSS classes used in the code. For example, you can change the background color of the table, change the color of the social media icons, or add more columns to the table.

Conclusion

In this article, we have learned how to create a Table Social UI component with Tailwind CSS in 5 easy steps. We have used a table element with social media icons to create the component. We have also used Tailwind CSS classes to style the table and its elements. Finally, we have added Font Awesome icons to display social media icons in the Share column. With Tailwind CSS, creating custom UI components has never been easier!