Published on

Ways To Build A WhatsApp Web Clone With Tailwind CSS In 60 Minutes

WhatsApp Web Clone

As the world becomes more connected, messaging apps like WhatsApp have become an essential part of our daily lives. WhatsApp Web is a great way to stay connected with your friends and family without having to switch between your phone and computer. In this article, we will explore how to build a WhatsApp Web clone using Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom user interfaces. It provides a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is easy to learn and can help you save a lot of time when building user interfaces.

The description of WhatsApp Web Clone ui component

WhatsApp Web Clone is a user interface component that mimics the WhatsApp Web interface. It consists of a chat window, a sidebar with a list of chats, and a header with a search bar and menu icons.

Why use Tailwind CSS to create a WhatsApp Web Clone ui component?

Tailwind CSS can help you build a WhatsApp Web Clone ui component quickly and easily. It provides a set of pre-defined classes that you can use to style your HTML elements. This means that you don't have to write custom CSS for every element on the page. Additionally, Tailwind CSS is easy to learn and can help you save a lot of time when building user interfaces.

The preview of WhatsApp Web Clone ui component

To give you an idea of what the WhatsApp Web Clone ui component looks like, here is a preview:

Free download of the WhatsApp Web Clone's source code

The source code of WhatsApp Web Clone ui component

To build the WhatsApp Web Clone ui component, you will need to write HTML and CSS code. Here is the source code for the WhatsApp Web Clone ui component:

<div>
        <div class="w-full h-32" style="background-color: #449388"></div>

        <div class="container mx-auto" style="margin-top: -128px;">
            <div class="py-6 h-screen">
                <div class="flex border border-grey rounded shadow-lg h-full">

                    <!-- Left -->
                    <div class="w-1/3 border flex flex-col">

                        <!-- Header -->
                        <div class="py-2 px-3 bg-grey-lighter flex flex-row justify-between items-center">
                            <div>
                                <img class="w-10 h-10 rounded-full" src="http://andressantibanez.com/res/avatar.png"/>
                            </div>

                            <div class="flex">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#727A7E" d="M12 20.664a9.163 9.163 0 0 1-6.521-2.702.977.977 0 0 1 1.381-1.381 7.269 7.269 0 0 0 10.024.244.977.977 0 0 1 1.313 1.445A9.192 9.192 0 0 1 12 20.664zm7.965-6.112a.977.977 0 0 1-.944-1.229 7.26 7.26 0 0 0-4.8-8.804.977.977 0 0 1 .594-1.86 9.212 9.212 0 0 1 6.092 11.169.976.976 0 0 1-.942.724zm-16.025-.39a.977.977 0 0 1-.953-.769 9.21 9.21 0 0 1 6.626-10.86.975.975 0 1 1 .52 1.882l-.015.004a7.259 7.259 0 0 0-5.223 8.558.978.978 0 0 1-.955 1.185z"></path></svg>
                                </div>
                                <div class="ml-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path opacity=".55" fill="#263238" d="M19.005 3.175H4.674C3.642 3.175 3 3.789 3 4.821V21.02l3.544-3.514h12.461c1.033 0 2.064-1.06 2.064-2.093V4.821c-.001-1.032-1.032-1.646-2.064-1.646zm-4.989 9.869H7.041V11.1h6.975v1.944zm3-4H7.041V7.1h9.975v1.944z"></path></svg>
                                </div>
                                <div class="ml-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".6" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg>
                                </div>
                            </div>
                        </div>

                        <!-- Search -->
                        <div class="py-2 px-2 bg-grey-lightest">
                            <input type="text" class="w-full px-2 py-2 text-sm" placeholder="Search or start new chat"/>
                        </div>

                        <!-- Contacts -->
                        <div class="bg-grey-lighter flex-1 overflow-auto">
                            <div class="px-3 flex items-center bg-grey-light cursor-pointer">
                                <div>
                                    <img class="h-12 w-12 rounded-full"
                                         src="https://darrenjameseeley.files.wordpress.com/2014/09/expendables3.jpeg"/>
                                </div>
                                <div class="ml-4 flex-1 border-b border-grey-lighter py-4">
                                    <div class="flex items-bottom justify-between">
                                        <p class="text-grey-darkest">
                                            New Movie! Expendables 4
                                        </p>
                                        <p class="text-xs text-grey-darkest">
                                            12:45 pm
                                        </p>
                                    </div>
                                    <p class="text-grey-dark mt-1 text-sm">
                                        Get Andrés on this movie ASAP!
                                    </p>
                                </div>
                            </div>
                            <div class="bg-white px-3 flex items-center hover:bg-grey-lighter cursor-pointer">
                                <div>
                                    <img class="h-12 w-12 rounded-full"
                                         src="https://www.biography.com/.image/t_share/MTE5NDg0MDU1MTIyMTE4MTU5/arnold-schwarzenegger-9476355-1-402.jpg"/>
                                </div>
                                <div class="ml-4 flex-1 border-b border-grey-lighter py-4">
                                    <div class="flex items-bottom justify-between">
                                        <p class="text-grey-darkest">
                                            Arnold Schwarzenegger
                                        </p>
                                        <p class="text-xs text-grey-darkest">
                                            12:45 pm
                                        </p>
                                    </div>
                                    <p class="text-grey-dark mt-1 text-sm">
                                        I'll be back
                                    </p>
                                </div>
                            </div>
                            <div class="bg-white px-3 flex items-center hover:bg-grey-lighter cursor-pointer">
                                <div>
                                    <img class="h-12 w-12 rounded-full"
                                         src="https://www.famousbirthdays.com/headshots/russell-crowe-6.jpg"/>
                                </div>
                                <div class="ml-4 flex-1 border-b border-grey-lighter py-4">
                                    <div class="flex items-bottom justify-between">
                                        <p class="text-grey-darkest">
                                            Russell Crowe
                                        </p>
                                        <p class="text-xs text-grey-darkest">
                                            12:45 pm
                                        </p>
                                    </div>
                                    <p class="text-grey-dark mt-1 text-sm">
                                        Hold the line!
                                    </p>
                                </div>
                            </div>
                            <div class="bg-white px-3 flex items-center hover:bg-grey-lighter cursor-pointer">
                                <div>
                                    <img class="h-12 w-12 rounded-full"
                                         src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGpYTzuO0zLW7yadaq4jpOz2SbsX90okb24Z9GtEvK6Z9x2zS5"/>
                                </div>
                                <div class="ml-4 flex-1 border-b border-grey-lighter py-4">
                                    <div class="flex items-bottom justify-between">
                                        <p class="text-grey-darkest">
                                            Tom Cruise
                                        </p>
                                        <p class="text-xs text-grey-darkest">
                                            12:45 pm
                                        </p>
                                    </div>
                                    <p class="text-grey-dark mt-1 text-sm">
                                        Show me the money!
                                    </p>
                                </div>
                            </div>
                            <div class="bg-white px-3 flex items-center hover:bg-grey-lighter cursor-pointer">
                                <div>
                                    <img class="h-12 w-12 rounded-full"
                                         src="https://www.biography.com/.image/t_share/MTE5NTU2MzE2MjE4MTY0NzQ3/harrison-ford-9298701-1-sized.jpg"/>
                                </div>
                                <div class="ml-4 flex-1 border-b border-grey-lighter py-4">
                                    <div class="flex items-bottom justify-between">
                                        <p class="text-grey-darkest">
                                            Harrison Ford
                                        </p>
                                        <p class="text-xs text-grey-darkest">
                                            12:45 pm
                                        </p>
                                    </div>
                                    <p class="text-grey-dark mt-1 text-sm">
                                        Tell Java I have the money
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>


                    <!-- Right -->
                    <div class="w-2/3 border flex flex-col">

                        <!-- Header -->
                        <div class="py-2 px-3 bg-grey-lighter flex flex-row justify-between items-center">
                            <div class="flex items-center">
                                <div>
                                    <img class="w-10 h-10 rounded-full" src="https://darrenjameseeley.files.wordpress.com/2014/09/expendables3.jpeg"/>
                                </div>
                                <div class="ml-4">
                                    <p class="text-grey-darkest">
                                        New Movie! Expendables 4
                                    </p>
                                    <p class="text-grey-darker text-xs mt-1">
                                        Andrés, Tom, Harrison, Arnold, Sylvester
                                    </p>
                                </div>
                            </div>

                            <div class="flex">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".5" d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg>
                                </div>
                                <div class="ml-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".5" d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"></path></svg>
                                </div>
                                <div class="ml-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".6" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg>
                                </div>
                            </div>
                        </div>

                        <!-- Messages -->
                        <div class="flex-1 overflow-auto" style="background-color: #DAD3CC">
                            <div class="py-2 px-3">

                                <div class="flex justify-center mb-2">
                                    <div class="rounded py-2 px-4" style="background-color: #DDECF2">
                                        <p class="text-sm uppercase">
                                            February 20, 2018
                                        </p>
                                    </div>
                                </div>

                                <div class="flex justify-center mb-4">
                                    <div class="rounded py-2 px-4" style="background-color: #FCF4CB">
                                        <p class="text-xs">
                                            Messages to this chat and calls are now secured with end-to-end encryption. Tap for more info.
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-teal">
                                            Sylverter Stallone
                                        </p>
                                        <p class="text-sm mt-1">
                                            Hi everyone! Glad you could join! I am making a new movie.
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-purple">
                                            Tom Cruise
                                        </p>
                                        <p class="text-sm mt-1">
                                            Hi all! I have one question for the movie
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-orange">
                                            Harrison Ford
                                        </p>
                                        <p class="text-sm mt-1">
                                            Again?
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-orange">
                                            Russell Crowe
                                        </p>
                                        <p class="text-sm mt-1">
                                            Is Andrés coming for this one?
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-teal">
                                            Sylverter Stallone
                                        </p>
                                        <p class="text-sm mt-1">
                                            He is. Just invited him to join.
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex justify-end mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #E2F7CB">
                                        <p class="text-sm mt-1">
                                            Hi guys.
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex justify-end mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #E2F7CB">
                                        <p class="text-sm mt-1">
                                            Count me in
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                                <div class="flex mb-2">
                                    <div class="rounded py-2 px-3" style="background-color: #F2F2F2">
                                        <p class="text-sm text-purple">
                                            Tom Cruise
                                        </p>
                                        <p class="text-sm mt-1">
                                            Get Andrés on this movie ASAP!
                                        </p>
                                        <p class="text-right text-xs text-grey-dark mt-1">
                                            12:45 pm
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- Input -->
                        <div class="bg-grey-lighter px-4 py-4 flex items-center">
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path opacity=".45" fill="#263238" d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"></path></svg>
                            </div>
                            <div class="flex-1 mx-4">
                                <input class="w-full border rounded px-2 py-2" type="text"/>
                            </div>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".45" d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg>
                            </div>
                        </div>
                    </div>

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

How to create a WhatsApp Web Clone with Tailwind CSS?

To create a WhatsApp Web Clone with Tailwind CSS, follow these steps:

Step 1: Set up your project

Create a new HTML file and add the necessary HTML boilerplate code. Then, add the Tailwind CSS CDN link to 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>WhatsApp Web Clone</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
    />
  </head>
  <body>
    <!-- Your HTML code goes here -->
  </body>
</html>

Step 2: Create the header section

The header section of the WhatsApp Web Clone ui component consists of a search bar and menu icons. To create this section, add the following HTML code to your file:

<header class="bg-gray-800 text-white p-4 flex justify-between items-center">
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M4.73 6.3a1 1 0 011.41 0l2.3 2.3a1 1 0 01.3.7v.01a1 1 0 01-.3.7l-2.3 2.3a1 1 0 01-1.41-1.42L6.59 9H3a1 1 0 01-.9-.55A1 1 0 012 8V4a1 1 0 01.55-.9 1 1 0 01.45-.1 1 1 0 01.9.55 1 1 0 01.1.45v2.85zm14.54 6.4a1 1 0 01-1.41 0l-2.3-2.3a1 1 0 01-.3-.7v-.01a1 1 0 01.3-.7l2.3-2.3a1 1 0 011.41 1.42L17.41 9h3a1 1 0 01.9.55A1 1 0 0122 10v4a1 1 0 01-.55.9 1 1 0 01-.45.1 1 1 0 01-.9-.55zM7.41 15a1 1 0 01-.7-.3 1 1 0 010-1.4l2.3-2.3a1 1 0 011.4 1.4l-2.3 2.3a1 1 0 01-.7.3zm9.18 0a1 1 0 01-.7-.3l-2.3-2.3a1 1 0 011.4-1.4l2.3 2.3a1 1 0 01-.7 1.7z"
        fill="currentColor"
      />
    </svg>
  </div>
  <div>
    <input
      type="text"
      class="bg-gray-700 text-white rounded-full py-2 px-4 w-64"
      placeholder="Search"
    />
  </div>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M12 13a2 2 0 100-4 2 2 0 000 4zm0 3a5 5 0 015-5v2a3 3 0 00-3 3h-2zm0-6a3 3 0 11-3 3 3 3 0 013-3z"
        fill="currentColor"
      />
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M12 13a2 2 0 100-4 2 2 0 000 4zm0 3a5 5 0 015-5v2a3 3 0 00-3 3h-2zm0-6a3 3 0 11-3 3 3 3 0 013-3z"
        fill="currentColor"
      />
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M12 13a2 2 0 100-4 2 2 0 000 4zm0 3a5 5 0 015-5v2a3 3 0 00-3 3h-2zm0-6a3 3 0 11-3 3 3 3 0 013-3z"
        fill="currentColor"
      />
    </svg>
  </div>
</header>

Step 3: Create the sidebar section

The sidebar section of the WhatsApp Web Clone ui component consists of a list of chats. To create this section, add the following HTML code to your file:

<div class="flex">
  <div class="w-1/4 bg-gray-900 h-screen">
    <div class="p-4">
      <input
        type="text"
        class="bg-gray-800 text-white rounded-full py-2 px-4 w-full"
        placeholder="Search or start new chat"
      />
    </div>
    <div class="overflow-y-scroll">
      <ul class="p-4">
        <li class="flex items-center py-2">
          <img
            src="https://randomuser.me/api/portraits/women/17.jpg"
            alt="Avatar"
            class="w-10 h-10 rounded-full mr-4"
          />
          <div class="flex-1">
            <div class="font-bold">Jane Doe</div>
            <div class="text-gray-500">Hello, how are you?</div>
          </div>
          <div class="text-gray-500">1:30 PM</div>
        </li>
        <li class="flex items-center py-2">
          <img
            src="https://randomuser.me/api/portraits/men/18.jpg"
            alt="Avatar"
            class="w-10 h-10 rounded-full mr-4"
          />
          <div class="flex-1">
            <div class="font-bold">John Doe</div>
            <div class="text-gray-500">Can you send me the file?</div>
          </div>
          <div class="text-gray-500">3:15 PM</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="w-3/4 bg-gray-800 h-screen">
    <div class="p-4">
      <div class="font-bold text-white">Jane Doe</div>
      <div class="text-gray-500">Last seen 5 minutes ago</div>
    </div>
    <div class="overflow-y-scroll">
      <ul class="p-4">
        <li class="flex items-start py-2">
          <img
            src="https://randomuser.me/api/portraits/women/17.jpg"
            alt="Avatar"
            class="w-10 h-10 rounded-full mr-4"
          />
          <div class="flex-1">
            <div class="bg-gray-900 text-white rounded-lg p-2">
              Hello, how are you?
            </div>
            <div class="text-gray-500 text-sm">1:30 PM</div>
          </div>
        </li>
        <li class="flex items-end py-2">
          <div class="flex-1 text-right">
            <div class="bg-green-500 text-white rounded-lg p-2">
              I'm good, thanks for asking!
            </div>
            <div class="text-gray-500 text-sm">1:35 PM</div>
          </div>
          <img
            src="https://randomuser.me/api/portraits/women/17.jpg"
            alt="Avatar"
            class="w-10 h-10 rounded-full ml-4"
          />
        </li>
      </ul>
    </div>
    <div class="p-4">
      <input
        type="text"
        class="bg-gray-700 text-white rounded-full py-2 px-4 w-full"
        placeholder="Type a message"
      />
    </div>
  </div>
</div>

Step 4: Style the page

To style the page, add the following CSS code to your file:

/* Set the height of the body to 100% */
body {
  height: 100%;
}

/* Set the height of the chat window to 100% */
.w-3/4 {
  height: 100%;
}

/* Set the width of the chat window to 75% */
.w-3/4 {
  width: 75%;
}

/* Set the width of the sidebar to 25% */
.w-1/4 {
  width: 25%;
}

Step 5: Preview the page

Save your file and open it in your web browser to preview the WhatsApp Web Clone ui component.

Conclusion

In this article, we have explored how to build a WhatsApp Web Clone ui component using Tailwind CSS. We have covered the necessary HTML and CSS code to create the header and sidebar sections of the page. With the help of Tailwind CSS, you can quickly build custom user interfaces without having to write custom CSS for every element on the page.