Published on

How To Make A Clone WhatsApp Android UI - Status Tab With Tailwind CSS From Scratch

Tags

Clone WhatsApp Android UI - status Tab

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides you with a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can easily create responsive designs and customize your styles without writing any custom CSS.

The description of Clone WhatsApp Android UI - Status Tab ui component

In this tutorial, we will be creating a Clone WhatsApp Android UI - Status Tab ui component using Tailwind CSS. The Status Tab is a UI component that displays the status updates of your contacts. It shows a list of status updates that your contacts have posted, along with their profile pictures and the time when the status was posted.

Why use Tailwind CSS to create a Clone WhatsApp Android UI - Status Tab ui component?

Tailwind CSS is an excellent choice for creating UI components like the Status Tab because it provides you with a set of pre-defined CSS classes that you can use to style your HTML elements. This makes it easy to create custom designs without writing any custom CSS. Additionally, Tailwind CSS is highly customizable, which means you can easily modify the styles to match your design requirements.

The preview of Clone WhatsApp Android UI - Status Tab ui component

To create the Clone WhatsApp Android UI - Status Tab ui component, we will be using Tailwind CSS to style our HTML elements. The final result will look something like this:

Free download of the Clone WhatsApp Android UI - status Tab's source code

The source code of Clone WhatsApp Android UI - Status Tab ui component

To create the Clone WhatsApp Android UI - Status Tab ui component, we will be using HTML and Tailwind CSS. Here is the source code for the component:

<div class="flex flex-col min-h-screen max-w-sm mx-auto">
  <header class="flex flex-wrap pt-3 text-white mb-1" style="background-color:#128C7E">
    <div class="flex justify-between text-xl w-full font-medium pl-4">
      WhatsApp
      <div class="flex items-center">
        <svg
          class="h-4 mr-6 text-base"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
          ></path></svg
        ><svg
          class="h-4 mr-4 text-base"
          style=""
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 192 512"
        >
          <path
            fill="currentColor"
            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="flex w-full items-center mt-4">
      <div class="pl-3 w-full">
        <svg
          class="h-4"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"
          ></path>
        </svg>
      </div>
      <button
        class="opacity-50 tracking-wide text-sm uppercase font-medium text-center py-2 px-8 focus:outline-none"
      >
        chats
      </button>
      <button
        class="opacity-100 border-b-2 border-white tracking-wide text-sm uppercase font-medium text-center py-2 px-8 focus:outline-none"
      >
        status
      </button>
      <button
        class="opacity-50 tracking-wide text-sm uppercase font-medium text-center py-2 px-8 focus:outline-none"
      >
        calls
      </button>
    </div>
  </header>
  <div class="flex justify-between">
    <div class="px-3 pt-1 mt-1 flex">
      <img
        src="http://lorempixel.com/640/480/city"
        class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
        alt="dp"
        style="padding: 1px;"
      />
      <div class="flex flex-wrap ml-4 pb-4 w-full">
        <div class="inline-flex justify-between w-full font-bold">
          My status
        </div>
        <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
      </div>
    </div>
    <div class="inline-flex items-center p-4 text-green-200">
      <svg
        aria-hidden="true"
        focusable="false"
        data-prefix="fas"
        data-icon="ellipsis-h"
        class="svg-inline--fa fa-ellipsis-h fa-w-16 "
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 512 512"
      >
        <path
          fill="currentColor"
          d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="bg-gray-200 px-2 py-1 text-sm font-medium text-gray-600">
    Recent updates
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Emie</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Rickie</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Darrion</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Ernest</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Saul</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Camryn</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Waylon</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="px-3 pt-1 mt-1 flex">
    <img
      src="http://lorempixel.com/640/480/cats"
      class="w-12 h-12 rounded-full border-dashed border-green-200 border-2"
      alt="dp"
      style="padding: 1px;"
    />
    <div class="flex flex-wrap ml-4 pb-4 w-full">
      <div class="inline-flex justify-between w-full font-bold">Toney</div>
      <div class="inline-flex w-full text-sm text-gray-500">Today, 10:30</div>
    </div>
  </div>
  <div class="bg-gray-200 px-2 py-1 text-sm font-medium text-gray-600">
    Muted updates
  </div>
</div>

How to create a Clone WhatsApp Android UI - Status Tab with Tailwind CSS?

Now that we have an idea of what we will be creating, let's dive into the steps to create the Clone WhatsApp Android UI - Status Tab with Tailwind CSS.

Step 1: Set up your project

To get started, create a new HTML file and add the necessary HTML boilerplate code. Then, include the Tailwind CSS stylesheet in the head section of your HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clone WhatsApp Android UI - Status Tab</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" />
  </head>
  <body>
    <!-- Add your HTML code here -->
  </body>
</html>

Step 2: Create the HTML structure

Next, let's create the HTML structure for our Status Tab. We will use an unordered list to display the status updates. Each list item will contain the profile picture, name, and time of the status update.

<ul class="space-y-6">
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">Jane Doe</h2>
      <p class="text-gray-500">2 hours ago</p>
    </div>
  </li>
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">John Doe</h2>
      <p class="text-gray-500">4 hours ago</p>
    </div>
  </li>
</ul>

Step 3: Style the HTML elements with Tailwind CSS

Now that we have our HTML structure in place, let's use Tailwind CSS to style our elements. We will use the flex and space-x classes to align the profile picture and text, and the rounded-full class to make the profile picture circular.

<ul class="space-y-6">
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">Jane Doe</h2>
      <p class="text-gray-500">2 hours ago</p>
    </div>
  </li>
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">John Doe</h2>
      <p class="text-gray-500">4 hours ago</p>
    </div>
  </li>
</ul>

Step 4: Add additional styles

Finally, let's add some additional styles to make our Status Tab look more like the original. We will use the bg-gray-100, p-4, and shadow classes to add a background color, padding, and a shadow to the list.

<ul class="bg-gray-100 p-4 space-y-6 shadow">
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">Jane Doe</h2>
      <p class="text-gray-500">2 hours ago</p>
    </div>
  </li>
  <li class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile picture" />
    <div class="flex-1">
      <h2 class="text-lg font-medium">John Doe</h2>
      <p class="text-gray-500">4 hours ago</p>
    </div>
  </li>
</ul>

And that's it! We have successfully created a Clone WhatsApp Android UI - Status Tab ui component using Tailwind CSS.

Conclusion

In this tutorial, we learned how to create a Clone WhatsApp Android UI - Status Tab ui component using Tailwind CSS. We saw how Tailwind CSS makes it easy to create custom designs without writing any custom CSS. We also saw how we can use Tailwind CSS to style our HTML elements and create responsive designs. With Tailwind CSS, you can create beautiful user interfaces in no time.