Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created July 22, 2020 07:55
Show Gist options
  • Save neisdev/f0f0c7c359de16347274773c335d518c to your computer and use it in GitHub Desktop.
Save neisdev/f0f0c7c359de16347274773c335d518c to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS - Facebook Clone
Raw
index.html
<body 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://gravatar.com/avatar/b19536334f76e904381e09b5a8776646?s=512&d=https://static.codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png">
<span class="text-white ml-1">
Shuvro
</span>
</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://s3.amazonaws.com/99Covers-Facebook-Covers/watermark/13762.jpg">
<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>
</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://gravatar.com/avatar/b19536334f76e904381e09b5a8776646?s=512&d=https://static.codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png">
</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.fdac15-1.fna.fbcdn.net/v/t1.0-1/p160x160/38471710_1864466673590219_2505239258227277824_n.jpg?_nc_cat=0&amp;oh=5baabd619722f307c947f407dae0c308&amp;oe=5C2DC290">
<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://gravatar.com/avatar/b19536334f76e904381e09b5a8776646?s=512&d=https://static.codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png">
</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://gravatar.com/avatar/b19536334f76e904381e09b5a8776646?s=512&d=https://static.codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png">
</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.fdac15-1.fna.fbcdn.net/v/t1.0-1/p160x160/38471710_1864466673590219_2505239258227277824_n.jpg?_nc_cat=0&amp;oh=5baabd619722f307c947f407dae0c308&amp;oe=5C2DC290" 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>
</body>
Raw
styles
<link href="https://cdn.rawgit.com/shuvroroy/facebook-clone/7d8b2e1f/public/css/main.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment