Published on

The Ultimate Guide To Help You Build A Facebook Clone With Tailwind CSS

Tags
Pages
Facebook Clone

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Facebook Clone ui component

A more polished facebook clone made with tailwind css.

Why use Tailwind CSS to make a Facebook Clone ui component?

  • It can make the building process of Facebook Clone ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Facebook Clone component file.

The preview of Facebook Clone ui component

Free download of the Facebook Clone's source code

The source code of Facebook Clone ui component

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/shuvroroy/facebook-clone/7d8b2e1f/public/css/main.css">
<div class="font-sans leading-none bg-grey-lighter mb-8">
    <header class="bg-blue">
        <div class="container mx-auto">
            <div class="flex items-center py-2 mx-24">
                <div class="w-1/2">
                    <div class="flex items-center">
                        <div class="cursor-pointer mr-1">
                            <?xml version="1.0" encoding="utf-8"?>
                            <svg class="w-7 h-7 rounded-lg" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1579 128q35 0 60 25t25 60v1366q0 35-25 60t-60 25h-391v-595h199l30-232h-229v-148q0-56 23.5-84t91.5-28l122-1v-207q-63-9-178-9-136 0-217.5 80t-81.5 226v171h-200v232h200v595h-735q-35 0-60-25t-25-60v-1366q0-35 25-60t60-25h1366z" fill="#fff">
                                </path>
                            </svg>
                        </div>
                        <div class="w-full relative">
                            <input class="appearance-none w-full h-6 py-1 px-2 rounded text-sm border" placeholder="Search" type="text">
                            <span class="flex items-center bg-grey-lightest hover:bg-grey-lighter absolute pin-r pin-y px-4 rounded cursor-pointer">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z">
                                    </path>
                                </svg>
                            </span>
                            </input>
                        </div>
                    </div>
                </div>
                <div class="w-1/2 flex items-center justify-end text-xs font-bold">
                    <a class="mr-4 block no-underline flex items-center" href="#">
                    <img class="h-6 w-6 rounded-full" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/c0.0.24.24/p24x24/15965627_1248767438493482_2912203675748580358_n.jpg?oh=cc77f8cc0e2d09d13d6dbd86214538bf&oe=5AF36334">
                    <span class="text-white ml-1">
                    Shuvro
                    </span>
                    </img>
                    </a>
                    <a class="mr-4 block no-underline flex items-center text-white" href="#">
                    Home
                    </a>
                    <div class="px-3">
                        <a class="no-underline" href="#">
                            <svg class="w-6 h-6" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z">
                                </path>
                            </svg>
                        </a>
                        <a class="no-underline px-2" href="#">
                            <?xml version="1.0" encoding="UTF-8"?>
                            <svg class="h-6 w-6" version="1.1" viewbox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <g id="surface1">
                                    <path d="M 25 2 C 12.300781 2 2 11.601563 2 23.5 C 2 29.800781 4.898438 35.699219 10 39.800781 L 10 48.601563 L 18.601563 44.101563 C 20.699219 44.699219 22.800781 44.898438 25 44.898438 C 37.699219 44.898438 48 35.300781 48 23.398438 C 48 11.601563 37.699219 2 25 2 Z M 27.300781 30.601563 L 21.5 24.398438 L 10.699219 30.5 L 22.699219 17.800781 L 28.601563 23.699219 L 39.101563 17.800781 Z " style=" ">
                                    </path>
                                </g>
                            </svg>
                        </a>
                        <a class="no-underline" href="#">
                            <?xml version="1.0" encoding="utf-8"?>
                            <svg class="h-6 w-6" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                <path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm274 521q-2 1-9.5 9.5t-13.5 9.5q2 0 4.5-5t5-11 3.5-7q6-7 22-15 14-6 52-12 34-8 51 11-2-2 9.5-13t14.5-12q3-2 15-4.5t15-7.5l2-22q-12 1-17.5-7t-6.5-21q0 2-6 8 0-7-4.5-8t-11.5 1-9 1q-10-3-15-7.5t-8-16.5-4-15q-2-5-9.5-11t-9.5-10q-1-2-2.5-5.5t-3-6.5-4-5.5-5.5-2.5-7 5-7.5 10-4.5 5q-3-2-6-1.5t-4.5 1-4.5 3-5 3.5q-3 2-8.5 3t-8.5 2q15-5-1-11-10-4-16-3 9-4 7.5-12t-8.5-14h5q-1-4-8.5-8.5t-17.5-8.5-13-6q-8-5-34-9.5t-33-.5q-5 6-4.5 10.5t4 14 3.5 12.5q1 6-5.5 13t-6.5 12q0 7 14 15.5t10 21.5q-3 8-16 16t-16 12q-5 8-1.5 18.5t10.5 16.5q2 2 1.5 4t-3.5 4.5-5.5 4-6.5 3.5l-3 2q-11 5-20.5-6t-13.5-26q-7-25-16-30-23-8-29 1-5-13-41-26-25-9-58-4 6-1 0-15-7-15-19-12 3-6 4-17.5t1-13.5q3-13 12-23 1-1 7-8.5t9.5-13.5.5-6q35 4 50-11 5-5 11.5-17t10.5-17q9-6 14-5.5t14.5 5.5 14.5 5q14 1 15.5-11t-7.5-20q12 1 3-17-4-7-8-9-12-4-27 5-8 4 2 8-1-1-9.5 10.5t-16.5 17.5-16-5q-1-1-5.5-13.5t-9.5-13.5q-8 0-16 15 3-8-11-15t-24-8q19-12-8-27-7-4-20.5-5t-19.5 4q-5 7-5.5 11.5t5 8 10.5 5.5 11.5 4 8.5 3q14 10 8 14-2 1-8.5 3.5t-11.5 4.5-6 4q-3 4 0 14t-2 14q-5-5-9-17.5t-7-16.5q7 9-25 6l-10-1q-4 0-16 2t-20.5 1-13.5-8q-4-8 0-20 1-4 4-2-4-3-11-9.5t-10-8.5q-46 15-94 41 6 1 12-1 5-2 13-6.5t10-5.5q34-14 42-7l5-5q14 16 20 25-7-4-30-1-20 6-22 12 7 12 5 18-4-3-11.5-10t-14.5-11-15-5q-16 0-22 1-146 80-235 222 7 7 12 8 4 1 5 9t2.5 11 11.5-3q9 8 3 19 1-1 44 27 19 17 21 21 3 11-10 18-1-2-9-9t-9-4q-3 5 .5 18.5t10.5 12.5q-7 0-9.5 16t-2.5 35.5-1 23.5l2 1q-3 12 5.5 34.5t21.5 19.5q-13 3 20 43 6 8 8 9 3 2 12 7.5t15 10 10 10.5q4 5 10 22.5t14 23.5q-2 6 9.5 20t10.5 23q-1 0-2.5 1t-2.5 1q3 7 15.5 14t15.5 13q1 3 2 10t3 11 8 2q2-20-24-62-15-25-17-29-3-5-5.5-15.5t-4.5-14.5q2 0 6 1.5t8.5 3.5 7.5 4 2 3q-3 7 2 17.5t12 18.5 17 19 12 13q6 6 14 19.5t0 13.5q9 0 20 10.5t17 19.5q5 8 8 26t5 24q2 7 8.5 13.5t12.5 9.5l16 8 13 7q5 2 18.5 10.5t21.5 11.5q10 4 16 4t14.5-2.5 13.5-3.5q15-2 29 15t21 21q36 19 55 11-2 1 .5 7.5t8 15.5 9 14.5 5.5 8.5q5 6 18 15t18 15q6-4 7-9-3 8 7 20t18 10q14-3 14-32-31 15-49-18 0-1-2.5-5.5t-4-8.5-2.5-8.5 0-7.5 5-3q9 0 10-3.5t-2-12.5-4-13q-1-8-11-20t-12-15q-5 9-16 8t-16-9q0 1-1.5 5.5t-1.5 6.5q-13 0-15-1 1-3 2.5-17.5t3.5-22.5q1-4 5.5-12t7.5-14.5 4-12.5-4.5-9.5-17.5-2.5q-19 1-26 20-1 3-3 10.5t-5 11.5-9 7q-7 3-24 2t-24-5q-13-8-22.5-29t-9.5-37q0-10 2.5-26.5t3-25-5.5-24.5q3-2 9-9.5t10-10.5q2-1 4.5-1.5t4.5 0 4-1.5 3-6q-1-1-4-3-3-3-4-3 7 3 28.5-1.5t27.5 1.5q15 11 22-2 0-1-2.5-9.5t-.5-13.5q5 27 29 9 3 3 15.5 5t17.5 5q3 2 7 5.5t5.5 4.5 5-.5 8.5-6.5q10 14 12 24 11 40 19 44 7 3 11 2t4.5-9.5 0-14-1.5-12.5l-1-8v-18l-1-8q-15-3-18.5-12t1.5-18.5 15-18.5q1-1 8-3.5t15.5-6.5 12.5-8q21-19 15-35 7 0 11-9-1 0-5-3t-7.5-5-4.5-2q9-5 2-16 5-3 7.5-11t7.5-10q9 12 21 2 8-8 1-16 5-7 20.5-10.5t18.5-9.5q7 2 8-2t1-12 3-12q4-5 15-9t13-5l17-11q3-4 0-4 18 2 31-11 10-11-6-20 3-6-3-9.5t-15-5.5q3-1 11.5-.5t10.5-1.5q15-10-7-16-17-5-43 12zm-163 877q206-36 351-189-3-3-12.5-4.5t-12.5-3.5q-18-7-24-8 1-7-2.5-13t-8-9-12.5-8-11-7q-2-2-7-6t-7-5.5-7.5-4.5-8.5-2-10 1l-3 1q-3 1-5.5 2.5t-5.5 3-4 3 0 2.5q-21-17-36-22-5-1-11-5.5t-10.5-7-10-1.5-11.5 7q-5 5-6 15t-2 13q-7-5 0-17.5t2-18.5q-3-6-10.5-4.5t-12 4.5-11.5 8.5-9 6.5-8.5 5.5-8.5 7.5q-3 4-6 12t-5 11q-2-4-11.5-6.5t-9.5-5.5q2 10 4 35t5 38q7 31-12 48-27 25-29 40-4 22 12 26 0 7-8 20.5t-7 21.5q0 6 2 16z">
                                </path>
                            </svg>
                        </a>
                    </div>
                    <a class="border-l border-grey-darkest pl-3" href="#">
                        <?xml version="1.0" encoding="utf-8"?>
                        <svg class="h-6 w-6" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z">
                            </path>
                        </svg>
                    </a>
                    <a class="ml-2" href="#">
                        <?xml version="1.0" encoding="utf-8"?>
                        <svg class="h-6 w-6 rounded-full" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z">
                            </path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <div class="container mx-auto">
        <div class="ml-20 mr-48 border border-t-0">
            <div class="relative">
                <span class="absolute pin-t pin-l ml-6 mt-6 cursor-pointer">
                    <?xml version="1.0" encoding="utf-8"?>
                    <svg class="h-6 w-6" viewbox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z" fill="#fff">
                        </path>
                    </svg>
                </span>
                <img alt="cover" src="https://scontent-sit4-1.xx.fbcdn.net/v/t31.0-0/c0.0.919.340/p180x540/16112546_1248760215160871_453014928435972080_o.jpg?oh=7a44cfa1eec96f8dbc3418f31fbc2bf0&oe=5ADE0050">
                <span class="absolute pin-b pin-r mb-6 mr-4">
                    <span class="bg-white border p-1 text-grey-darkest cursor-pointer text-sm rounded">
                        <?xml version="1.0" encoding="utf-8"?>
                        <svg class="h-4 w-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z">
                            </path>
                        </svg>
                        <span class="mr-2">
                        Edit Profile
                        </span>
                    </span>
                    <span class="bg-white border p-1 text-grey-darkest ml-4 cursor-pointer text-sm rounded">
                        <span class="border-r pr-2">
                        View Activity Log
                        </span>
                        <?xml version="1.0" encoding="utf-8"?>
                        <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M576 736v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68z">
                            </path>
                        </svg>
                    </span>
                </span>
                </img>
            </div>
            <div class="bg-white h-12 flex items-center">
                <div class="w-1/4">
                    <div class="relative">
                        <img alt="pic" class="p-1 bg-white absolute pin-b ml-4 shadow" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/c0.2.160.160/p160x160/15965627_1248767438493482_2912203675748580358_n.jpg?oh=b27e9394fa6f213fe09ad848b2bd0121&oe=5AE94D04">
                        </img>
                    </div>
                </div>
                <div class="w-1/2">
                    <div class="relative">
                        <h1 class="absolute pin-l pin-b mb-8 font-normal text-2xl text-white">
                            Shuvro Roy
                        </h1>
                    </div>
                    <ul class="list-reset flex font-bold">
                        <li class="cursor-pointer px-4 border-l text-grey-darkest">
                            Timeline
                        </li>
                        <li class="cursor-pointer px-4 border-l text-blue">
                            About
                        </li>
                        <li class="cursor-pointer px-4 border-l text-blue flex items-center">
                            Friends
                            <span class="font-hairline text-xs text-grey-darker ml-2">
                            417
                            </span>
                        </li>
                        <li class="cursor-pointer px-4 border-l text-blue">
                            Photos
                        </li>
                        <li class="cursor-pointer px-4 border-l text-blue border-r flex items-center">
                            More
                            <?xml version="1.0" encoding="utf-8"?>
                            <svg class="h-3 w-3 rounded-full ml-2" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z">
                                </path>
                            </svg>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container mx-auto">
        <div class="ml-20 mr-48">
            <div class="flex mt-3">
                <div class="w-2/5">
                    <div class="bg-white mr-4 p-4 shadow">
                        <div>
                            Intro
                        </div>
                        <div class="text-center border-b py-4 text-xs">
                            Life is simple
                        </div>
                        <ul class="list-reset text-xs pt-4">
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-3 h-3 mr-3" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M640 256h512v-128h-512v128zm1152 640v480q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-480h672v160q0 26 19 45t45 19h320q26 0 45-19t19-45v-160h672zm-768 0v128h-256v-128h256zm768-480v384h-1792v-384q0-66 47-113t113-47h352v-160q0-40 28-68t68-28h576q40 0 68 28t28 68v160h352q66 0 113 47t47 113z">
                                    </path>
                                </svg>
                                <span>
                                Works at
                                <a class="no-underline hover:underline text-blue" href="#">
                                IEEE NSU Student Branch - INSB
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-3 h-3 mr-3" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M640 256h512v-128h-512v128zm1152 640v480q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-480h672v160q0 26 19 45t45 19h320q26 0 45-19t19-45v-160h672zm-768 0v128h-256v-128h256zm768-480v384h-1792v-384q0-66 47-113t113-47h352v-160q0-40 28-68t68-28h576q40 0 68 28t28 68v160h352q66 0 113 47t47 113z">
                                    </path>
                                </svg>
                                <span>
                                Creative director at
                                <a class="no-underline hover:underline text-blue" href="#">
                                Shopno'11
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-2" viewbox="0 0 2304 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1774 836l18 316q4 69-82 128t-235 93.5-323 34.5-323-34.5-235-93.5-82-128l18-316 574 181q22 7 48 7t48-7zm530-324q0 23-22 31l-1120 352q-4 1-10 1t-10-1l-652-206q-43 34-71 111.5t-34 178.5q63 36 63 109 0 69-58 107l58 433q2 14-8 25-9 11-24 11h-192q-15 0-24-11-10-11-8-25l58-433q-58-38-58-107 0-73 65-111 11-207 98-330l-333-104q-22-8-22-31t22-31l1120-352q4-1 10-1t10 1l1120 352q22 8 22 31z">
                                    </path>
                                </svg>
                                <span class="leading-tight">
                                Studies BSc. Computer Science and <br> Engineering at
                                <a class="no-underline hover:underline text-blue" href="#">
                                North South University
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-2" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1472 992v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z">
                                    </path>
                                </svg>
                                <span>
                                Lives in
                                <a class="no-underline hover:underline text-blue" href="#">
                                Dhaka, Bangladesh
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-3 h-3 mr-3" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z">
                                    </path>
                                </svg>
                                <span>
                                Single
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-2" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150 362 150 150 362z">
                                    </path>
                                </svg>
                                <span>
                                From
                                <a class="no-underline hover:underline text-blue" href="#">
                                Kishorganj, Dhaka, Bangladesh
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-1">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-3 h-3 mr-3" viewbox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1024 1131q0 64-37 106.5t-91 42.5h-512q-54 0-91-42.5t-37-106.5 9-117.5 29.5-103 60.5-78 97-28.5q6 4 30 18t37.5 21.5 35.5 17.5 43 14.5 42 4.5 42-4.5 43-14.5 35.5-17.5 37.5-21.5 30-18q57 0 97 28.5t60.5 78 29.5 103 9 117.5zm-157-520q0 94-66.5 160.5t-160.5 66.5-160.5-66.5-66.5-160.5 66.5-160.5 160.5-66.5 160.5 66.5 66.5 160.5zm925 445v64q0 14-9 23t-23 9h-576q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h576q14 0 23 9t9 23zm0-252v56q0 15-10.5 25.5t-25.5 10.5h-568q-15 0-25.5-10.5t-10.5-25.5v-56q0-15 10.5-25.5t25.5-10.5h568q15 0 25.5 10.5t10.5 25.5zm0-260v64q0 14-9 23t-23 9h-576q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h576q14 0 23 9t9 23zm128 960v-1216q0-13-9.5-22.5t-22.5-9.5h-1728q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h352v-96q0-14 9-23t23-9h64q14 0 23 9t9 23v96h768v-96q0-14 9-23t23-9h64q14 0 23 9t9 23v96h352q13 0 22.5-9.5t9.5-22.5zm128-1216v1216q0 66-47 113t-113 47h-1728q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z">
                                    </path>
                                </svg>
                                <span>
                                Followed by
                                <a class="no-underline hover:underline text-blue" href="#">
                                33 people
                                </a>
                                </span>
                            </li>
                            <li class="flex items-center py-3">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-2" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M320 256q0 72-64 110v1266q0 13-9.5 22.5t-22.5 9.5h-64q-13 0-22.5-9.5t-9.5-22.5v-1266q-64-38-64-110 0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm1472 64v763q0 25-12.5 38.5t-39.5 27.5q-215 116-369 116-61 0-123.5-22t-108.5-48-115.5-48-142.5-22q-192 0-464 146-17 9-33 9-26 0-45-19t-19-45v-742q0-32 31-55 21-14 79-43 236-120 421-120 107 0 200 29t219 88q38 19 88 19 54 0 117.5-21t110-47 88-47 54.5-21q26 0 45 19t19 45z">
                                    </path>
                                </svg>
                                <a class="no-underline hover:underline text-blue-dark" href="#">
                                Add Pages You Manage
                                </a>
                            </li>
                        </ul>
                        <div class="flex flex-col items-center justify-center border-t py-3">
                            <button class="appearance-none p-2 border text-xs text-grey-darker rounded hover:border-black mb-2">
                            github.com/shuvroroy
                            </button>
                            <button class="appearance-none p-2 border text-xs text-grey-darker rounded hover:border-black">
                            instagram.com/r_shuvro
                            </button>
                        </div>
                    </div>
                    <div class="bg-white mt-4 shadow mr-4">
                        <div class="p-4">
                            <h5 class="font-normal hover:underline text-base">Featured Albums</h5>
                        </div>
                    </div>
                    <div class="bg-white mt-4 shadow mr-4">
                        <div class="relative p-4">
                            <h5 class="font-normal hover:underline text-base">Did You Know</h5>
                            <span class="absolute pin-r pin-t mr-4 mt-4">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="h-4 w-4" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="bg-white mt-4 shadow mr-4">
                        <div class="relative p-4 text-xs">
                            <p class="leading-normal">English (US) &middot; <span class="text-blue cursor-pointer hover:underline">বাংলা</span> &middot; <span class="text-blue cursor-pointer hover:underline">অসমীয়া</span> &middot; <span class="text-blue cursor-pointer hover:underline">Español</span> &middot; <br> <span class="text-blue cursor-pointer hover:underline">Português (Brasil)</span></p>
                            <div class="absolute pin-r pin-t mr-4 mt-4">
                                <button class="appearance-none px-3 py-2 border rounded hover:bg-grey-lighter">&plus;</button>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 mt-3">
                        <p class="text-grey text-xs font-hairline leading-normal">
                            <span class="hover:underline cursor-pointer">Privacy</span> &middot;
                            <span class="hover:underline cursor-pointer">Terms</span> &middot;
                            <span class="hover:underline cursor-pointer">Advertising</span> &middot;
                            <span class="hover:underline cursor-pointer">Ad Choices</span> &middot;
                            <br>
                            <span class="hover:underline cursor-pointer">Cookies</span> &middot;
                            <span class="hover:underline cursor-pointer">More</span>
                            <br>
                            Facebook © 2018
                        </p>
                    </div>
                </div>
                <div class="w-3/5">
                    <div class="bg-white shadow">
                        <div class="bg-grey-lightest p-3">
                            <ul class="flex items-center list-reset font-bold text-xs">
                                <li class="flex items-center px-2 border-r border-grey-darkest cursor-pointer">
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z">
                                        </path>
                                    </svg>
                                    <span class="px-1 text-grey-darkest">
                                    Make Post
                                    </span>
                                </li>
                                <li class="flex items-center px-2 text-blue border-r border-grey-darkest cursor-pointer">
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <svg class="w-4 h-4" viewbox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z">
                                        </path>
                                    </svg>
                                    <span class="px-1">
                                    Photo/Video
                                    </span>
                                </li>
                                <li class="flex items-center px-2 text-blue border-r border-grey-darkest cursor-pointer">
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1792 352v1088q0 42-39 59-13 5-25 5-27 0-45-19l-403-403v166q0 119-84.5 203.5t-203.5 84.5h-704q-119 0-203.5-84.5t-84.5-203.5v-704q0-119 84.5-203.5t203.5-84.5h704q119 0 203.5 84.5t84.5 203.5v165l403-402q18-19 45-19 12 0 25 5 39 17 39 59z">
                                        </path>
                                    </svg>
                                    <span class="px-1">
                                    Live Video
                                    </span>
                                </li>
                                <li class="flex items-center px-2 text-blue cursor-pointer">
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M320 256q0 72-64 110v1266q0 13-9.5 22.5t-22.5 9.5h-64q-13 0-22.5-9.5t-9.5-22.5v-1266q-64-38-64-110 0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm1472 64v763q0 25-12.5 38.5t-39.5 27.5q-215 116-369 116-61 0-123.5-22t-108.5-48-115.5-48-142.5-22q-192 0-464 146-17 9-33 9-26 0-45-19t-19-45v-742q0-32 31-55 21-14 79-43 236-120 421-120 107 0 200 29t219 88q38 19 88 19 54 0 117.5-21t110-47 88-47 54.5-21q26 0 45 19t19 45z">
                                        </path>
                                    </svg>
                                    <span class="px-1">
                                    Life Event
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="px-3 pt-0 pb-2">
                            <div class="flex items-center border-b pb-3">
                                <img alt="" class="block w-10 h-10 rounded-full" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/c0.0.40.40/p40x40/15965627_1248767438493482_2912203675748580358_n.jpg?oh=275a309dca6487d05f09b91d7c77c6d6&oe=5B222E71">
                                <textarea class="appearance-none flex-1 ml-2 mt-4" id="body" name="body" placeholder="What's on your mind?"></textarea>
                                </img>
                            </div>
                        </div>
                        <div class="px-3 pb-2 border-b">
                            <ul class="flex items-center list-reset font-bold text-xs text-grey-darkest">
                                <li class="bg-grey-lightest p-2 rounded-full mr-4 cursor-pointer hover:bg-grey-lighter">
                                    Photo/Video
                                </li>
                                <li class="bg-grey-lightest p-2 rounded-full mr-4 cursor-pointer hover:bg-grey-lighter">
                                    Feeling/Activity
                                </li>
                                <li class="bg-grey-lightest p-2 rounded-lg mr-4 cursor-pointer hover:bg-grey-lighter">
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <svg class="w-4 h-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M576 736v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68z">
                                        </path>
                                    </svg>
                                </li>
                            </ul>
                        </div>
                        <div class="flex justify-end p-3 text-xs">
                            <button class="border p-2 rounded mr-4 flex items-center">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="h-4 w-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm274 521q-2 1-9.5 9.5t-13.5 9.5q2 0 4.5-5t5-11 3.5-7q6-7 22-15 14-6 52-12 34-8 51 11-2-2 9.5-13t14.5-12q3-2 15-4.5t15-7.5l2-22q-12 1-17.5-7t-6.5-21q0 2-6 8 0-7-4.5-8t-11.5 1-9 1q-10-3-15-7.5t-8-16.5-4-15q-2-5-9.5-11t-9.5-10q-1-2-2.5-5.5t-3-6.5-4-5.5-5.5-2.5-7 5-7.5 10-4.5 5q-3-2-6-1.5t-4.5 1-4.5 3-5 3.5q-3 2-8.5 3t-8.5 2q15-5-1-11-10-4-16-3 9-4 7.5-12t-8.5-14h5q-1-4-8.5-8.5t-17.5-8.5-13-6q-8-5-34-9.5t-33-.5q-5 6-4.5 10.5t4 14 3.5 12.5q1 6-5.5 13t-6.5 12q0 7 14 15.5t10 21.5q-3 8-16 16t-16 12q-5 8-1.5 18.5t10.5 16.5q2 2 1.5 4t-3.5 4.5-5.5 4-6.5 3.5l-3 2q-11 5-20.5-6t-13.5-26q-7-25-16-30-23-8-29 1-5-13-41-26-25-9-58-4 6-1 0-15-7-15-19-12 3-6 4-17.5t1-13.5q3-13 12-23 1-1 7-8.5t9.5-13.5.5-6q35 4 50-11 5-5 11.5-17t10.5-17q9-6 14-5.5t14.5 5.5 14.5 5q14 1 15.5-11t-7.5-20q12 1 3-17-4-7-8-9-12-4-27 5-8 4 2 8-1-1-9.5 10.5t-16.5 17.5-16-5q-1-1-5.5-13.5t-9.5-13.5q-8 0-16 15 3-8-11-15t-24-8q19-12-8-27-7-4-20.5-5t-19.5 4q-5 7-5.5 11.5t5 8 10.5 5.5 11.5 4 8.5 3q14 10 8 14-2 1-8.5 3.5t-11.5 4.5-6 4q-3 4 0 14t-2 14q-5-5-9-17.5t-7-16.5q7 9-25 6l-10-1q-4 0-16 2t-20.5 1-13.5-8q-4-8 0-20 1-4 4-2-4-3-11-9.5t-10-8.5q-46 15-94 41 6 1 12-1 5-2 13-6.5t10-5.5q34-14 42-7l5-5q14 16 20 25-7-4-30-1-20 6-22 12 7 12 5 18-4-3-11.5-10t-14.5-11-15-5q-16 0-22 1-146 80-235 222 7 7 12 8 4 1 5 9t2.5 11 11.5-3q9 8 3 19 1-1 44 27 19 17 21 21 3 11-10 18-1-2-9-9t-9-4q-3 5 .5 18.5t10.5 12.5q-7 0-9.5 16t-2.5 35.5-1 23.5l2 1q-3 12 5.5 34.5t21.5 19.5q-13 3 20 43 6 8 8 9 3 2 12 7.5t15 10 10 10.5q4 5 10 22.5t14 23.5q-2 6 9.5 20t10.5 23q-1 0-2.5 1t-2.5 1q3 7 15.5 14t15.5 13q1 3 2 10t3 11 8 2q2-20-24-62-15-25-17-29-3-5-5.5-15.5t-4.5-14.5q2 0 6 1.5t8.5 3.5 7.5 4 2 3q-3 7 2 17.5t12 18.5 17 19 12 13q6 6 14 19.5t0 13.5q9 0 20 10.5t17 19.5q5 8 8 26t5 24q2 7 8.5 13.5t12.5 9.5l16 8 13 7q5 2 18.5 10.5t21.5 11.5q10 4 16 4t14.5-2.5 13.5-3.5q15-2 29 15t21 21q36 19 55 11-2 1 .5 7.5t8 15.5 9 14.5 5.5 8.5q5 6 18 15t18 15q6-4 7-9-3 8 7 20t18 10q14-3 14-32-31 15-49-18 0-1-2.5-5.5t-4-8.5-2.5-8.5 0-7.5 5-3q9 0 10-3.5t-2-12.5-4-13q-1-8-11-20t-12-15q-5 9-16 8t-16-9q0 1-1.5 5.5t-1.5 6.5q-13 0-15-1 1-3 2.5-17.5t3.5-22.5q1-4 5.5-12t7.5-14.5 4-12.5-4.5-9.5-17.5-2.5q-19 1-26 20-1 3-3 10.5t-5 11.5-9 7q-7 3-24 2t-24-5q-13-8-22.5-29t-9.5-37q0-10 2.5-26.5t3-25-5.5-24.5q3-2 9-9.5t10-10.5q2-1 4.5-1.5t4.5 0 4-1.5 3-6q-1-1-4-3-3-3-4-3 7 3 28.5-1.5t27.5 1.5q15 11 22-2 0-1-2.5-9.5t-.5-13.5q5 27 29 9 3 3 15.5 5t17.5 5q3 2 7 5.5t5.5 4.5 5-.5 8.5-6.5q10 14 12 24 11 40 19 44 7 3 11 2t4.5-9.5 0-14-1.5-12.5l-1-8v-18l-1-8q-15-3-18.5-12t1.5-18.5 15-18.5q1-1 8-3.5t15.5-6.5 12.5-8q21-19 15-35 7 0 11-9-1 0-5-3t-7.5-5-4.5-2q9-5 2-16 5-3 7.5-11t7.5-10q9 12 21 2 8-8 1-16 5-7 20.5-10.5t18.5-9.5q7 2 8-2t1-12 3-12q4-5 15-9t13-5l17-11q3-4 0-4 18 2 31-11 10-11-6-20 3-6-3-9.5t-15-5.5q3-1 11.5-.5t10.5-1.5q15-10-7-16-17-5-43 12zm-163 877q206-36 351-189-3-3-12.5-4.5t-12.5-3.5q-18-7-24-8 1-7-2.5-13t-8-9-12.5-8-11-7q-2-2-7-6t-7-5.5-7.5-4.5-8.5-2-10 1l-3 1q-3 1-5.5 2.5t-5.5 3-4 3 0 2.5q-21-17-36-22-5-1-11-5.5t-10.5-7-10-1.5-11.5 7q-5 5-6 15t-2 13q-7-5 0-17.5t2-18.5q-3-6-10.5-4.5t-12 4.5-11.5 8.5-9 6.5-8.5 5.5-8.5 7.5q-3 4-6 12t-5 11q-2-4-11.5-6.5t-9.5-5.5q2 10 4 35t5 38q7 31-12 48-27 25-29 40-4 22 12 26 0 7-8 20.5t-7 21.5q0 6 2 16z">
                                    </path>
                                </svg>
                                <span class="px-2">
                                Public
                                </span>
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="h-4 w-4" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z">
                                    </path>
                                </svg>
                            </button>
                            <button class="bg-blue py-2 px-6 text-white rounded hover:bg-blue-light">
                            Post
                            </button>
                        </div>
                    </div>
                    <div class="bg-white shadow mt-4 p-3 pb-0 relative">
                        <div class="flex items-center">
                            <div>
                                <img alt="" class="w-10 h-10 rounded-full" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/c0.0.50.50/p50x50/13619895_1063211163769813_237117473223923700_n.jpg?oh=baf4fc3f59ddde8868f0f968b41cab21&oe=5AE422EE">
                                </img>
                            </div>
                            <div class="ml-2">
                                <h5>
                                    <a class="text-blue no-underline hover:underline" href="#">
                                    Partho Bfmv
                                    </a>
                                    is with
                                    <a class="text-blue no-underline hover:underline" href="#">
                                    Shariful Hoque Hriday
                                    </a>
                                    and
                                    <a class="text-blue no-underline hover:underline" href="#">
                                    2 others
                                    </a>
                                    .
                                </h5>
                                <p class="text-xs font-normal text-grey mt-1">
                                    <span class="cursor-pointer hover:underline">
                                    December 8, 2017
                                    </span>
                                    ·
                                    <span class="cursor-pointer hover:underline">
                                    Instagram
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="absolute pin-r pin-t mt-3 mr-3">
                            <?xml version="1.0" encoding="utf-8"?>
                            <svg class="w-4 h-4 text-right" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                <path d="M576 736v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h192q40 0 68 28t28 68z">
                                </path>
                            </svg>
                        </div>
                        <h5 class="text-sm font-normal my-3">
                            Brotherhood.
                            <span class="text-red text-lg">
                            ♥
                            </span>
                        </h5>
                        <div class="border">
                            <img alt="" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-0/p526x296/24796353_1561364460621145_3004549137840390947_n.jpg?oh=e9c249e251879520538cc3a924ee7711&oe=5B1DD598">
                            </img>
                        </div>
                        <div class="flex py-1">
                            <button class="appearance-none flex-1 flex items-center justify-center py-2 text-center text-red hover:bg-grey-lighter">
                                <?xml version="1.0" encoding="iso-8859-1"?>
                                <svg class="w-4 h-4 mr-1" id="Layer_1" style="enable-background:new 0 0 496.158 496.158;" version="1.1" viewbox="0 0 496.158 496.158" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                                    <path d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
                                        c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z" style="fill:#E04F5F;">
                                    </path>
                                    <path d="M374.116,155.145c-34.799-34.8-91.223-34.8-126.022,0h-0.029c-34.801-34.8-91.224-34.8-126.023,0
                                        c-34.801,34.8-29.783,86.842,0,126.022c31.541,41.491,89.129,109.944,126.023,109.944h0.029c36.895,0,94.481-68.453,126.022-109.944
                                        C403.9,241.988,408.916,189.946,374.116,155.145z" style="fill:#FFFFFF;">
                                    </path>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                </svg>
                                Love
                            </button>
                            <button class="appearance-none flex-1 flex items-center justify-center py-2 text-center text-grey-darker hover:bg-grey-lighter">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-1" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1792 896q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22-17 2-30.5-9t-17.5-29v-1q-3-4-.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-130 71-248.5t191-204.5 286-136.5 348-50.5q244 0 450 85.5t326 233 120 321.5z">
                                    </path>
                                </svg>
                                Comment
                            </button>
                            <button class="appearance-none flex-1 flex items-center justify-center py-2 text-center text-grey-darker hover:bg-grey-lighter">
                                <?xml version="1.0" encoding="utf-8"?>
                                <svg class="w-4 h-4 mr-1" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1792 640q0 26-19 45l-512 512q-19 19-45 19t-45-19-19-45v-256h-224q-98 0-175.5 6t-154 21.5-133 42.5-105.5 69.5-80 101-48.5 138.5-17.5 181q0 55 5 123 0 6 2.5 23.5t2.5 26.5q0 15-8.5 25t-23.5 10q-16 0-28-17-7-9-13-22t-13.5-30-10.5-24q-127-285-127-451 0-199 53-333 162-403 875-403h224v-256q0-26 19-45t45-19 45 19l512 512q19 19 19 45z">
                                    </path>
                                </svg>
                                Share
                            </button>
                        </div>
                        <div class="bg-grey-lighter p-2 -mx-3 border">
                            <?xml version="1.0" encoding="iso-8859-1"?>
                            <svg class="w-3 h-3" id="Layer_1" style="enable-background:new 0 0 496.158 496.158;" version="1.1" viewbox="0 0 496.158 496.158" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                                <path d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
                                    c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z" style="fill:#E04F5F;">
                                </path>
                                <path d="M374.116,155.145c-34.799-34.8-91.223-34.8-126.022,0h-0.029c-34.801-34.8-91.224-34.8-126.023,0
                                    c-34.801,34.8-29.783,86.842,0,126.022c31.541,41.491,89.129,109.944,126.023,109.944h0.029c36.895,0,94.481-68.453,126.022-109.944
                                    C403.9,241.988,408.916,189.946,374.116,155.145z" style="fill:#FFFFFF;">
                                </path>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                                <g>
                                </g>
                            </svg>
                            <span class="text-xs text-blue cursor-pointer hover:underline">
                            You, Abu Talha Khan and 139 others
                            </span>
                        </div>
                        <div class="bg-grey-lighter flex flex-between py-3 -mx-3 p-2">
                            <img class="w-8 h-8 rounded-full" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/c0.0.32.32/p32x32/15965627_1248767438493482_2912203675748580358_n.jpg?oh=dfb36f9ad642eae902881c19b2c68116&oe=5ADF3A11" alt="">
                            <textarea name="body" placeholder="Write a comment..." class="appearance-none w-full mx-2 bg-grey-lighter rounded-full border bg-white h-8 px-2 pt-2 text-xs"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How to make a Facebook Clone with Tailwind CSS?

Install tailwind css of verion 0.3.0

Use the link html tag to import the stylesheet of Tailwind CSS of the version 0.3.0

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Facebook Clone component

  • bg-grey-lighter
  • mb-8
  • bg-blue
  • mx-auto
  • flex
  • py-2
  • mx-24
  • w-1/2
  • mr-1
  • w-7
  • h-7
  • w-full
  • relative
  • h-6
  • py-1
  • px-2
  • text-sm
  • bg-grey-lightest
  • hover:bg-grey-lighter
  • absolute
  • px-4
  • w-4
  • h-4
  • text-xs
  • mr-4
  • block
  • w-6
  • text-white
  • ml-1
  • px-3
  • border-l
  • border-grey-darkest
  • pl-3
  • ml-2
  • ml-20
  • mr-48
  • border-t-0
  • ml-6
  • mt-6
  • mb-6
  • bg-white
  • p-1
  • text-grey-darkest
  • mr-2
  • ml-4
  • border-r
  • pr-2
  • h-12
  • w-1/4
  • text-2xl
  • text-blue
  • text-grey-darker
  • h-3
  • w-3
  • mt-3
  • w-2/5
  • p-4
  • text-center
  • border-b
  • py-4
  • pt-4
  • mr-3
  • py-3
  • text-blue-dark
  • flex-col
  • border-t
  • p-2
  • hover:border-black
  • mb-2
  • mt-4
  • text-base
  • text-grey
  • w-3/5
  • p-3
  • px-1
  • pt-0
  • pb-2
  • pb-3
  • w-10
  • h-10
  • flex-1
  • px-6
  • hover:bg-blue-light
  • pb-0
  • mt-1
  • text-right
  • my-3
  • text-red
  • text-lg
  • -mx-3
  • flex-between
  • w-8
  • h-8
  • mx-2
  • pt-2

95 steps to make a Facebook Clone component with Tailwind CSS

  1. Control the background color of an element to grey-lighter using the bg-grey-lighter utilities.

  2. Control the margin on bottom side of an element to 2rem using the mb-8 utilities.

  3. Control the background color of an element to blue using the bg-blue utilities.

  4. Control the horizontal margin of an element to auto using the mx-auto utilities.

  5. Use flex to create a block-level flex container.

  6. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  7. Control the horizontal margin of an element to 6rem using the mx-24 utilities.

  8. Use w-1/2 to set an element to a fixed width(1/2).

  9. Control the margin on right side of an element to 0.25rem using the mr-1 utilities.

  10. Use w-7 to set an element to a fixed width(1.75rem).

  11. Use h-7 to set an element to a fixed height(1.75rem).

  12. Use w-full to set an element to a 100% based width.

  13. Use relative to position an element according to the normal flow of the document.

  14. Use h-6 to set an element to a fixed height(1.5rem).

  15. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  16. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  17. Control the text color of an element to sm using the text-sm utilities.

  18. Control the background color of an element to grey-lightest using the bg-grey-lightest utilities.

  19. Control the background color of an element to grey-lighter using the hover:bg-grey-lighter utilities on hover.

  20. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  21. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  22. Use w-4 to set an element to a fixed width(1rem).

  23. Use h-4 to set an element to a fixed height(1rem).

  24. Control the text color of an element to xs using the text-xs utilities.

  25. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  26. Use inline utilities to put the element on its own line and fill its parent.

  27. Use w-6 to set an element to a fixed width(1.5rem).

  28. Control the text color of an element to white using the text-white utilities.

  29. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  30. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  31. Control the border color of an element to l using the border-l utilities.

  32. Control the border color of an element to grey-darkest using the border-grey-darkest utilities.

  33. Set the left padding of the element to 0.75rem using the pl-3 utilities class

  34. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  35. Control the margin on left side of an element to 5rem using the ml-20 utilities.

  36. Control the margin on right side of an element to 12rem using the mr-48 utilities.

  37. Control the border color of an element to t-0 using the border-t-0 utilities.

  38. Control the margin on left side of an element to 1.5rem using the ml-6 utilities.

  39. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  40. Control the margin on bottom side of an element to 1.5rem using the mb-6 utilities.

  41. Control the background color of an element to white using the bg-white utilities.

  42. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  43. Control the text color of an element to grey-darkest using the text-grey-darkest utilities.

  44. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  45. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  46. Control the border color of an element to r using the border-r utilities.

  47. Control the padding on right side of an element to 0.5rem using the pr-2 utilities.

  48. Use h-12 to set an element to a fixed height(3rem).

  49. Use w-1/4 to set an element to a fixed width(1/4).

  50. Control the text color of an element to 2xl using the text-2xl utilities.

  51. Control the text color of an element to blue using the text-blue utilities.

  52. Control the text color of an element to grey-darker using the text-grey-darker utilities.

  53. Use h-3 to set an element to a fixed height(0.75rem).

  54. Use w-3 to set an element to a fixed width(0.75rem).

  55. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  56. Use w-2/5 to set an element to a fixed width(2/5).

  57. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  58. Control the text color of an element to center using the text-center utilities.

  59. Control the border color of an element to b using the border-b utilities.

  60. Control the vertical padding of an element to 1rem using the py-4 utilities.

  61. Control the padding on top side of an element to 1rem using the pt-4 utilities.

  62. Control the margin on right side of an element to 0.75rem using the mr-3 utilities.

  63. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  64. Control the text color of an element to blue-dark using the text-blue-dark utilities.

  65. Use flex to create a block-level flex container.

  66. Control the border color of an element to t using the border-t utilities.

  67. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  68. Control the border color of an element to black using the hover:border-black utilities on hover.

  69. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  70. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  71. Control the text color of an element to base using the text-base utilities.

  72. Control the text color of an element to grey using the text-grey utilities.

  73. Use w-3/5 to set an element to a fixed width(3/5).

  74. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  75. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  76. Control the padding on top side of an element to 0rem using the pt-0 utilities.

  77. Control the padding on bottom side of an element to 0.5rem using the pb-2 utilities.

  78. Control the padding on bottom side of an element to 0.75rem using the pb-3 utilities.

  79. Use w-10 to set an element to a fixed width(2.5rem).

  80. Use h-10 to set an element to a fixed height(2.5rem).

  81. Use flex to create a block-level flex container.

  82. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  83. Control the background color of an element to blue-light using the hover:bg-blue-light utilities on hover.

  84. Control the padding on bottom side of an element to 0rem using the pb-0 utilities.

  85. Control the margin on top side of an element to 0.25rem using the mt-1 utilities.

  86. Control the text color of an element to right using the text-right utilities.

  87. Control the vertical margin of an element to 0.75rem using the my-3 utilities.

  88. Control the text color of an element to red using the text-red utilities.

  89. Control the text color of an element to lg using the text-lg utilities.

  90. Control the horizontal margin of an element to -0.75rem using the -mx-3 utilities.

  91. Use flex to create a block-level flex container.

  92. Use w-8 to set an element to a fixed width(2rem).

  93. Use h-8 to set an element to a fixed height(2rem).

  94. Control the horizontal margin of an element to 0.5rem using the mx-2 utilities.

  95. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Facebook Clone components, learn and follow along to implement your own components.