index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whatsapp</title>
    <link rel="shortcut icon" href="https://cdn4.iconfinder.com/data/icons/social-media-2110/64/WhatsApp-01-512.png"
        type="image/x-icon">
    <!-- tailwind css -->
    <link rel="stylesheet" href="assests/css/styles.css">
</head>

<body class="h-screen w-screen overflow-hidden bg-hero-pattern bg-emerald-800">
    <main class="h-screen md:flex md:justify-center md:mt-10">

        <div class="flex-col">

            <div class=" ">
                <!-- Header -->

                <div class="bg-emerald-800 ">
                    <div class="upper-nav bg-emerald-800 flex justify-between items-center px-4 py-[0.20rem] ">
                        <div class=" text-white p-4">
                            <a href="./index.html">
                                <h1 class="text-xl font-semibold">WhatsApp </h1>
                            </a>
                        </div>
                        <div class="tools flex justify-center items-center space-x-4 text-white">
                            <a href="https://github.com/Vk2401/whatsapp-ui-tailwind" class="hover:text-blue-400"
                                target="_blank" rel="noopener noreferrer" title="Source code Repo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                    class="fill-current">
                                    <path fill="currentColor" fill-rule="evenodd"
                                        d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974c0 4.406 2.857 8.145 6.821 9.465c.499.09.679-.217.679-.481c0-.237-.008-.865-.011-1.696c-2.775.602-3.361-1.338-3.361-1.338c-.452-1.152-1.107-1.459-1.107-1.459c-.905-.619.069-.605.069-.605c1.002.07 1.527 1.028 1.527 1.028c.89 1.524 2.336 1.084 2.902.829c.091-.645.351-1.085.635-1.334c-2.214-.251-4.542-1.107-4.542-4.93c0-1.087.389-1.979 1.024-2.675c-.101-.253-.446-1.268.099-2.64c0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336a9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021c.545 1.372.203 2.387.099 2.64c.64.696 1.024 1.587 1.024 2.675c0 3.833-2.33 4.675-4.552 4.922c.355.308.675.916.675 1.846c0 1.334-.012 2.41-.012 2.737c0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2z"
                                        clip-rule="evenodd" />
                                </svg></a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                class="fill-current hover:cursor-pointer hover:text-gray-300">

                                <path
                                    d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0c.41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z" />
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                class="fill-current hover:cursor-pointer  hover:text-gray-300">
                                <path
                                    d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z" />
                            </svg>
                        </div>
                    </div>
                    <div class="bg-emerald-800 flex justify-between items-center pt-[0.60rem]">
                        <div
                            class="bg-emerald-800 px-3 py-2 text-white flex justify-between items-center w-full space-x-4">
                            <div class="hover:cursor-pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                    class="fill-current w-6">
                                    <path
                                        d="M12 18q2.075 0 3.538-1.462Q17 15.075 17 13q0-2.075-1.462-3.538Q14.075 8 12 8Q9.925 8 8.463 9.462Q7 10.925 7 13q0 2.075 1.463 3.538Q9.925 18 12 18Zm0-2q-1.25 0-2.125-.875T9 13q0-1.25.875-2.125T12 10q1.25 0 2.125.875T15 13q0 1.25-.875 2.125T12 16Zm6-6q.425 0 .712-.288Q19 9.425 19 9t-.288-.713Q18.425 8 18 8t-.712.287Q17 8.575 17 9t.288.712Q17.575 10 18 10ZM4 21q-.825 0-1.412-.587Q2 19.825 2 19V7q0-.825.588-1.412Q3.175 5 4 5h3.15L8.7 3.325q.15-.15.337-.238Q9.225 3 9.425 3h5.15q.2 0 .388.087q.187.088.337.238L16.85 5H20q.825 0 1.413.588Q22 6.175 22 7v12q0 .825-.587 1.413Q20.825 21 20 21Z" />
                                </svg>
                            </div>

                            <div class="flex items-center flex-1 justify-between w-full px-2">
                                <a href="./index.html" rel="noopener noreferrer">
                                    <div
                                        class="uppercase font-medium text-sm flex items-center space-x-2 relative hover:cursor-pointer">
                                        <span class="">Chats</span>
                                        <span
                                            class="bg-white text-emerald-700 p-0.5 rounded-full w-5 h-5 text-xs flex items-center justify-center">
                                            2</span>
                                        <div class="absolute right-1 top-8 w-full h-1 bg-white"></div>
                                    </div>
                                </a>
                                <a href="./status.html" rel="noopener noreferrer">
                                    <div
                                        class="uppercase font-medium text-sm flex items-center space-x-2 hover:cursor-pointer">
                                        <span class="text-gray-400">Status</span>
                                    </div>
                                </a>
                                <a href="./calls.html" rel="noopener noreferrer">
                                    <div
                                        class="uppercase font-medium text-sm flex items-center space-x-2 hover:cursor-pointer">
                                        <span class="text-gray-400">Calls</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Chat List -->
                <div class="bg-white relative overflow-y-auto h-[86.7vh] md:h-[700px] md:w-[430px]">
                    <!-- float chat -->
                    <span
                        class="rounded-full bg-emerald-800 text-white fixed md:absolute bottom-3 right-2 hover:cursor-pointer hover:bg-emerald-950">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
                            class="fill-current m-3">
                            <path
                                d="M7 14h6q.425 0 .713-.288T14 13q0-.425-.288-.713T13 12H7q-.425 0-.713.288T6 13q0 .425.288.713T7 14Zm0-3h10q.425 0 .713-.288T18 10q0-.425-.288-.713T17 9H7q-.425 0-.713.288T6 10q0 .425.288.713T7 11Zm0-3h10q.425 0 .713-.288T18 7q0-.425-.288-.713T17 6H7q-.425 0-.713.288T6 7q0 .425.288.713T7 8ZM6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.413T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.588 1.413T20 18H6Z" />
                        </svg>

                    </span>
                    <!-- contacts -->
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white ">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://avatars.githubusercontent.com/u/95954567?v=4" alt="Vasanth dp"
                                        class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Vasan (You)</h2>
                                        <p class="text-gray-500"><span class="text-sky-500"><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                    viewBox="0 0 16 16" class="inline fill-current">
                                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                        stroke-linejoin="round" stroke-width="1.5"
                                                        d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5" />
                                                </svg></span><svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                height="18" viewBox="0 0 24 24" class="inline">
                                                <path fill="currentColor"
                                                    d="M5 21q-.825 0-1.413-.588T3 19V5q0-.825.588-1.413T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.588 1.413T19 21H5Zm1-4h12l-3.75-5l-3 4L9 13l-3 4Z" />
                                            </svg>Photo</p>
                                    </div>
                                    <div class="flex flex-col items-center space-y-1 ">
                                        <span class="text-gray-500 font-semibold text-sm">9/20/23</span>
                                        <span class="text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                height="18" viewBox="0 0 24 24">
                                                <g fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2">
                                                    <path d="M0 0h24v24H0z" />
                                                    <path fill="currentColor"
                                                        d="M16 3a1 1 0 0 1 .117 1.993L16 5v4.764l1.894 3.789a1 1 0 0 1 .1.331L18 14v2a1 1 0 0 1-.883.993L17 17h-4v4a1 1 0 0 1-1.993.117L11 21v-4H7a1 1 0 0 1-.993-.883L6 16v-2a1 1 0 0 1 .06-.34l.046-.107L8 9.762V5a1 1 0 0 1-.117-1.993L8 3h8z" />
                                                </g>
                                            </svg></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="ring-offset-3 ring-2 ring-emerald-600 rounded-full p-1"><img
                                        src="https://futureoflife.org/wp-content/uploads/2020/08/elon_musk_royal_society.jpg"
                                        alt="Elon DP" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Elon Musk</h2>
                                        <p class="text-gray-500">Hello Vasanth! i need some help!!</p>
                                    </div>
                                    <div class="flex flex-col items-center space-y-1 ">
                                        <span class="text-green-600 font-semibold text-sm">08:03AM</span>
                                        <span
                                            class="w-6 h-6 p-2 rounded-full text-sm bg-green-600 flex items-center text-white font-semibold">2</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="ring-offset-3 ring-2 ring-emerald-600 rounded-full p-1"><img
                                        src="https://cdn4.sharechat.com/img_383728_25cca224_1675075381144_sc.jpg?tenant=sc&referrer=pwa-sharechat-service&f=144_sc.jpg"
                                        alt="Girl" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">She ❤️</h2>
                                        <p class="text-gray-500">Hy bea 😍</p>
                                    </div>
                                    <div class="flex flex-col items-center space-y-1 ">
                                        <span class="text-green-600 font-semibold text-sm">12:02PM</span>
                                        <span
                                            class="w-6 h-6 p-2 rounded-full text-sm bg-green-600 flex items-center text-white font-semibold">8</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://i.pinimg.com/736x/22/6b/e9/226be9a09039334899b5237196b84b57.jpg"
                                        alt="Friend" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Virat</h2>
                                        <p class="text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                height="18" viewBox="0 0 16 16" class="inline">
                                                <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="1.5"
                                                    d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5" />
                                            </svg><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                viewBox="0 0 24 24" class="inline">
                                                <path fill="currentColor"
                                                    d="M5 21q-.825 0-1.413-.588T3 19V5q0-.825.588-1.413T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.588 1.413T19 21H5Zm1-4h12l-3.75-5l-3 4L9 13l-3 4Z" />
                                            </svg>Photo</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">Yesterday</span>

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

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
                                        alt="Friend" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">+91 9876548876</h2>
                                        <p class="text-gray-500">Dear Vasanthkum...</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">9/18/23</span>

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

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://media.licdn.com/dms/image/D5603AQEyjfaEGhQhPQ/profile-displayphoto-shrink_200_200/0/1694280278019?e=1701302400&v=beta&t=DUyN70KIWTDRVxzPgmbX0Zt52Wt3Uo-l4sX-Tg9U15Y"
                                        alt="mom dp" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Mom</h2>
                                        <p class="text-gray-500"><span class="text-sky-500"><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                    viewBox="0 0 16 16" class="inline fill-current">
                                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                        stroke-linejoin="round" stroke-width="1.5"
                                                        d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5" />
                                                </svg></span>Varen ma!!</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">4/11/23</span>

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

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://breed-assets.wisdompanel.com/dog/street-dog-india/Indian_Street_Dog2.jpg"
                                        alt="surya dp" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Surya</h2>
                                        <p class="text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                height="18" viewBox="0 0 16 16" class="inline">
                                                <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="1.5"
                                                    d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5" />
                                            </svg>
                                            </svg>Okay</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">3/28/23</span>

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

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
                                        alt="murali" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Murali</h2>
                                        <p class="text-gray-500">Hann</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">3/12/23</span>

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

                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-200 cursor-pointer bg-white">
                        <div>
                            <div class="flex items-center pb-1">
                                <div class="rounded-full p-1"><img
                                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIAfzBPTnPC3UFfc_0nE9WJ-kIjvWwE6zj-A&usqp=CAU"
                                        alt="danush" class="w-16 h-auto rounded-full "></div>
                                <div class="ml-4 flex justify-between w-full">
                                    <div>
                                        <h2 class="text-lg font-semibold">Danush</h2>
                                        <p class="text-gray-500"><span class="text-sky-500"><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                    viewBox="0 0 16 16" class="inline fill-current">
                                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                        stroke-linejoin="round" stroke-width="1.5"
                                                        d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5" />
                                                </svg></span>okay bye👋</p>
                                    </div>
                                    <div class="flex flex-col items-center h-full">
                                        <span class="text-gray-600 font-semibold text-sm">1/02/23</span>

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

                        </div>
                    </div>
                    <!-- chat footer -->
                    <div class="h-[0.1px] bg-gray-300 w-full"></div>
                    <div class="text-center  mb-32">
                        <p class="text-[12px] mt-2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                viewBox="0 0 24 24" class="inline ">
                                <path fill="currentColor"
                                    d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h1V6q0-2.075 1.463-3.538T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm6-5q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6v2Z" />
                            </svg> Your personal messages are <span class="text-emerald-700">end-to-end encrypted</span>
                        </p>
                    </div>

                </div>


            </div>


        </div>
        </div>
    </main>
</body>

</html>