6+ CSS Twitter Clone Examples

This post contains a total of 6+ Hand-Picked CSS Twitter Clone Examples with Source Code. All these Twitter Clones are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Twitter Clone Examples

1. By Anmol Verma

Made by Anmol Verma. Amazing Twitter Clone. Source

css twitter clone by anmol verma
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:[email protected]&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.linkstyle {
  text-decoration: none;
  color: rgb(228, 228, 228);
}
.hline {
  width: 100%;
  height: 1px;
  background-color: rgb(54, 66, 68);
}
/* .vline {
  width: 1px;
  height: 100vh;
  background-color: rgb(54, 66, 68);
  background-color: rgb(18, 163, 189);
  position: fixed ;
  top: 0;
  z-index: 2200;
} */

.vline{
  width: 5px;
  background-color: rgba(255, 255, 255,0.3);
}

.htline{
  width: 100%;
  height: 13px;
  background-color: rgb(24, 27, 27);
  border: 1px solid rgb(54, 66, 68);
  flex-direction: row;
}

.space-in-word-of-tweet{
  margin: 3px;
}
body {
  background-color: black;
  color: rgb(228, 228, 228);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
.container {
  display: flex;
  flex-direction: row;
}

/* Left */

.left {
  padding: 0px 29px 0px 110px;
  font-size: 20px;
  font-weight: 650;
  /* position: sticky;
  top: 0;
  z-index: 1000;
  background-color: black; */
}
.leftall {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: black;
}
.twitter {
  height: 55px;
  padding-left: 17px;
}

.left nav ul,
.tweet {
  list-style: none;
  padding: 0px 50px;
  display: flex;
  flex-direction: column;
}

.left nav ul li {
  height: 50px;
  /* background-color: red; */
  /* text-align: center; */
  border-radius: 20px;
}
.tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pageso {
  display: flex;
  /* justify-content: center; */
  /* Below is where magic happened */
  align-items: center;
}
.lisvg {
  padding: 0px 15px 0px 0px;
}
.allpsvg {
  fill: black;
}

.navsvg {
  padding: 0px 0px 0px 0px;
}

.left nav ul li a,
.tweet a {
  color: rgb(228, 228, 228);
  text-decoration: none;
}

nav ul .homebar,.hometext{
  /* background-color: red; */
  color: rgb(0, 132, 255);
  cursor: pointer;
}

.homesvg{
  filter: invert(59%) sepia(53%) saturate(4760%) hue-rotate(176deg) brightness(99%) contrast(91%);
}

.left nav ul li:hover {
  color: rgb(0, 132, 255);
  background-color: rgb(20, 30, 32);
}

.left nav ul li a:hover {
  color: rgb(0, 132, 255);
  background-color: rgb(20, 30, 32);
}

.tweetbox {
  padding-left: 42px;
}

.tweet {
  background-color: rgb(0, 132, 255);
  width: 150px;
  height: 47px;
  justify-content: center;
  align-content: center;
  border-radius: 26px;
}
.parentmediatweetsvg {
  display: none;
}
.mediatweetsvg {
  height: 40px;
  width: 40px;
  border-radius: 100px;
  background-color: rgb(18, 130, 235);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mediatweetsvgpath {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(78deg) brightness(107%)
    contrast(102%);
}
.tweet:hover {
  background-color: rgb(27, 122, 211);
}

.name {
  display: flex;
  padding: 36px 0px 0px 39px;
  height: 76px;
  width: 239px;
  font-size: 16px;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  /* background-color: red; */
  position: relative;
  top: 110px;
}
.pimg {
  height: 40px;
  border-radius: 30px;
}

.personname {
  margin: 20px;
}

.pimg,
.personname {
  position: relative;
  top: -17px;
  right: 10px;
}

.name:hover {
  background-color: rgb(20, 30, 32);
}

/* Centre */

.centre {
  display: flex;
  flex-direction: column;
  /* max-width: 700px; */
  width: 700px;
}

.centreall {
  /* min-width: calc(); */
  min-width: 39vw;
  position: sticky;
  top: 0%;
  z-index: 1000;
  background-color: black;
}

.home {
  font-size: 20px;
  font-weight: 800;
  padding: 15px;
}

.feather {
  fill: rgb(0, 132, 255);
}

.writetweet {
  display: flex;
  flex-direction: row;
  padding: 5px 5px 100px 15px;
  box-sizing: border-box;
}

/* .profileimgcentre {
} */

.pimgcentre {
  height: 45px;
  border-radius: 20px;
  /* align-items: flex-start; */
}

.wtweet {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
  /* overflow: hidden; */
}

.witweet {
  background-color: black;
  border: 0;
  color: white;
  font-size: 22px;
  outline: none;
}

.tweetpost {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 132, 255, 0.4);
  width: 100px;
  border-radius: 40px;
  cursor: pointer;
  position: relative;
  top: 85px;
  left: 156px;
}

.tweetpost:hover {
  background-color: rgba(0, 132, 255, 0.7);
}

.otheruser {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 0px 15px;
}

.otherimg {
  border-radius: 40px;
}

.userdetails {
  display: flex;
  flex-direction: row;
}

.usercontent {
  padding: 0px 0px 10px 50px;
  flex-direction: column;
  max-width: 550px;
  font-family: inherit;
}

.userupimage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 10px 10px;
}

.givenimage {
  border-radius: 20px;
  border: 1px solid rgb(228, 228, 228);
}

.usertweetoptions {
  display: flex;
  flex-direction: row;
}

.replybox {
  display: flex;
  padding: 0px 40px;
}

.reply,
.heartred,
.retgreen {
  fill: black;
}

.replycount,
.heartcount,
.tweetcount {
  font-size: 14px;
  color: rgb(228, 228, 228);
  padding: 0px 0px 0px 10px;
}

.reply:hover {
  stroke: rgb(0, 132, 255);
}

.replycount:hover {
  color: rgb(0, 132, 255);
}
.heartred:hover {
  stroke: red;
}
.heartcount:hover {
  color: red;
}
.retgreen:hover {
  stroke: rgb(23, 184, 23);
}
.tweetcount:hover {
  color: rgb(23, 184, 23);
}

/* Right */

.right {
  position: -webkit-sticky;
  top: 100px;
}

.searchtwitter {
  height: 60px;
  background-color: black;
  padding: 8px 0px 0px 40px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.search {
  /* text-align: center; */
  display: flex;
  /* justify-content: center; */
  background-color: rgb(36, 34, 34);
  width: 300px;
  height: 40px;
  border-radius: 30px;
  position: relative;
  padding: 8px;
  box-sizing: border-box;
}

.searchsvg {
  fill: rgb(36, 34, 34);
  /* filter: invert(10%) sepia(5%) saturate(1449%) hue-rotate(175deg) brightness(100%) contrast(90%); */
}

.intwitter__search__textbox {
  padding: 12px;
  background-color: rgb(36, 34, 34);
  border: none;
  color: white;
  outline: none;
}
/* .search:focus {
  background: red; 
  border: 2px solid rgb(0, 132, 255);
} */

.whatshappiningcontainer {
  padding: 20px 0px 0px 42px;
  width: 80%;
  /* font-size: 20px; */
  font-family: sans-serif;
  color: rgb(228, 228, 228);
}

.whatshappining {
  border-radius: 20px;
  /* padding: 20px 0px 0px 42px; */
  /* padding-left: 15px; */
  background-color: rgb(21, 24, 28);
}

.whatshappining h3 {
  font-weight: 1000;
}

.trending {
  padding: 10px 0px 10px 20px;
}

.showmore {
  color: rgb(0, 132, 255);
}

.trendingbox {
  cursor: pointer;
}

.trendingbox:hover {
  background-color: rgb(32, 36, 41);
}

.whotofollow {
  padding: 20px 0px 0px 42px;
  width: 80%;
  /* font-size: 20px; */
  font-family: sans-serif;
  color: rgb(228, 228, 228);
  /* overflow: hidden; */
}

.boxwhotofollow {
  border-radius: 20px;
  /* padding: 20px 0px 0px 42px; */
  /* padding-left: 15px; */
  background-color: rgb(21, 24, 28);
}
.boxwhotofollow h2 {
  padding: 10px 0px 10px 20px;
}

.tofollow {
  padding: 10px 0px 10px 20px;
  display: flex;
  cursor: pointer;
}

.tofollowleft {
  display: flex;
  flex-direction: row;
}

.tofollow:hover {
  background-color: rgb(32, 36, 41);
}

.tofollowprofileimg img {
  height: 50px;
  border-radius: 40px;
}
.tofollowname {
  display: flex;
  flex-direction: column;
}
.nametofollow,
.mqnametofollow {
  padding: 0px 0px 5px 10px;
  width: max-content;
}
.mqnametofollow {
  display: none;
}
.adressnametofollow {
  padding-left: 10px;
  font-size: 12px;
}
.tick {
  padding-left: 5px;
}
.ticksvg {
  fill: rgb(228, 228, 228);
}
.tofollowone .followbuttonbox {
  padding: 0px 0px 0px 73px;
}

.tofollowtwo .followbuttonbox {
  padding: 0px 0px 0px 25px;
}
.tofollowthree .followbuttonbox {
  padding: 0px 0px 0px 40px;
}

.tofollowbutton {
  height: 40px;
  width: 100px;
  border: 1px solid rgb(0, 132, 255);
  color: rgb(0, 132, 255);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tofollowbutton:hover {
  background-color: rgba(0, 132, 255, 0.1);
}

.seemoretofollow {
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgb(0, 132, 255);
}

.seemoretofollow:hover {
  background-color: rgb(32, 36, 41);
  border-radius: 0px 0px 20px 20px;
}

.copyright {
  padding: 30px 0px 0px 55px;
  width: 80%;
  /* font-size: 20px; */
  font-family: sans-serif;
  color: rgb(228, 228, 228);
}
.termsser,
.addcopyright {
  display: flex;
  font-size: 12px;
  color: rgb(121, 121, 121);
}
.termsser p,
.addcopyright p {
  padding: 10px 0px 5px 10px;
}
.termsser p:hover,
.addcopyright p:hover {
  cursor: pointer;
  text-decoration: underline;
}
/* @media screen and (max-width: 800px){
    body{
        background-color: brown;
    }
    .container{
        background-color: yellow;
      }
    } */
@media screen and (max-width: 1495px) {
  .tweetpost {
    left: 80px;
  }
}
@media screen and (max-width: 1430px) {
  .left {
    padding: 0px 10px 0px 80px;
  }
  .tofollowone .followbuttonbox {
    padding: 0px 0px 0px 50px;
  }

  .tofollowtwo .followbuttonbox {
    padding: 0px 0px 0px 2px;
  }
  .tofollowthree .followbuttonbox {
    padding: 0px 0px 0px 18px;
  }
}
@media screen and (max-width: 1400px) {
  .left {
    padding: 0px 10px 0px 80px;
  }
}
@media screen and (max-width: 1320.8px) {
  .searchtwitter {
    padding: 8px 0px 0px 20px;
  }
  .whotofollow {
    padding: 20px 0px 0px 20px;
  }
  .copyright {
    padding: 30px 0px 0px 33px;
  }
}
@media screen and (max-width: 1292px) {
  .left {
    padding: 0px 0px 0px 0px;
  }
}
@media screen and (max-width: 1202.4px) {
  .pages {
    display: none;
  }
  .tweet {
    display: none;
  }
  .name {
    width: auto;
    padding-left: 20px;
  }
  .name .personname {
    display: none;
  }
  .parentmediatweetsvg {
    display: contents;
  }
  .mediatweetsvg:hover {
    background-color: rgb(27, 122, 211);
  }
}
@media screen and (max-width: 1085.6px) {
  /* .tofollowtwo .nametofollow{
    display: none;
  }
  .mqnametofollow{
    padding: 0px 0px 5px 10px;
    display: contents;
  } */
  .tofollow {
    display: flex;
    flex-direction: column;
  }
  .tofollowone .followbuttonbox {
    padding: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
  }

  .tofollowtwo .followbuttonbox {
    padding: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
  }
  .tofollowthree .followbuttonbox {
    padding: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 942.6px) {
  .left {
    padding-left: 20px;
  }
  .right {
    display: none;
  }
  .tweetpost {
    left: 217px;
  }
}
@media screen and (max-width: 823px) {
  .tweetpost {
    left: 100px;
  }
}
@media screen and (max-width: 704px) {
  .left {
    padding: 0;
  }
}
@media screen and (max-width: 670px){
  /* .twitter{
    padding: 0px;
  }
  .left nav ul{
    padding: 0px;
  } */
  .leftallpd{
    padding: 0px;
  }
}
</style>
</head>
<body>
  <header></header>
    <main>
      <div class="container">
        <div class="left">
          <div class="leftall">
            <nav>
              <a href="home.html">
                <img
                  src="/Images/White-twitter-logo.jpg"
                  alt=""
                  class="twitter leftallpd"
              /></a>
              <ul class="leftallpd">
                <div class="tabs">
                  <!-- Add images in nav bar -->
                  <li class="pageso homebar">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-home navsvg"
                      >
                        <path
                          d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
                          class="homesvg allpsvg"
                        ></path>
                        <polyline
                          points="9 22 9 12 15 12 15 22"
                          class="allpsvg"
                        ></polyline>
                      </svg>
                    </div>
                    <div class="hometext pages">Home</div>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-hash navsvg"
                      >
                        <line x1="4" y1="9" x2="20" y2="9"></line>
                        <line x1="4" y1="15" x2="20" y2="15"></line>
                        <line x1="10" y1="3" x2="8" y2="21"></line>
                        <line x1="16" y1="3" x2="14" y2="21"></line>
                      </svg>
                    </div>

                    <a href="explore.html" class="pages">Explore</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-bell navsvg"
                      >
                        <path
                          d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"
                          class="notisvg allpsvg"
                        ></path>
                        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                      </svg>
                    </div>

                    <a href="notification.html" class="pages">Notification</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-mail navsvg"
                      >
                        <path
                          d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
                          class="mainsvg allpsvg"
                        ></path>
                        <polyline
                          points="22,6 12,13 2,6"
                          class="mainsvg allpsvg"
                        ></polyline>
                      </svg>
                    </div>

                    <a href="messages.html" class="pages">Messages</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-bookmark navsvg"
                      >
                        <path
                          d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
                          class="booksvg allpsvg"
                        ></path>
                      </svg>
                    </div>

                    <a href="bookmark.html" class="pages">Bookmark</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-list navsvg"
                      >
                        <line x1="8" y1="6" x2="21" y2="6"></line>
                        <line x1="8" y1="12" x2="21" y2="12"></line>
                        <line x1="8" y1="18" x2="21" y2="18"></line>
                        <line x1="3" y1="6" x2="3.01" y2="6"></line>
                        <line x1="3" y1="12" x2="3.01" y2="12"></line>
                        <line x1="3" y1="18" x2="3.01" y2="18"></line>
                      </svg>
                    </div>

                    <a href="list.html" class="pages">List</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-user navsvg"
                      >
                        <path
                          d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                          class="allpsvg"
                        ></path>
                        <circle cx="12" cy="7" r="4" class="allpsvg"></circle>
                      </svg>
                    </div>

                    <a href="profile.html" class="pages">Profile</a>
                  </li>
                  <li class="pageso">
                    <div class="lisvg">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="feather feather-more-horizontal navsvg"
                      >
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="19" cy="12" r="1"></circle>
                        <circle cx="5" cy="12" r="1"></circle>
                      </svg>
                    </div>

                    <a href="more.html" class="pages">More</a>
                  </li>
                </div>
              </ul>
              <div class="tweetbox leftallpd">
                <div class="tweet"><a href="tweet.html">Tweet</a></div>
                <div class="parentmediatweetsvg">
                  <div class="mediatweetsvg">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="
                        tweetsvg
                        r-jwli3a
                        r-4qtqp9
                        r-yyyyoo
                        r-1q142lx
                        r-50lct3
                        r-dnmrzs
                        r-bnwqim
                        r-1plcrui
                        r-lrvibr
                        r-1srniue
                      "
                    >
                      <g>
                        <path
                          d="M8.8 7.2H5.6V3.9c0-.4-.3-.8-.8-.8s-.7.4-.7.8v3.3H.8c-.4 0-.8.3-.8.8s.3.8.8.8h3.3v3.3c0 .4.3.8.8.8s.8-.3.8-.8V8.7H9c.4 0 .8-.3.8-.8s-.5-.7-1-.7zm15-4.9v-.1h-.1c-.1 0-9.2 1.2-14.4 11.7-3.8 7.6-3.6 9.9-3.3 9.9.3.1 3.4-6.5 6.7-9.2 5.2-1.1 6.6-3.6 6.6-3.6s-1.5.2-2.1.2c-.8 0-1.4-.2-1.7-.3 1.3-1.2 2.4-1.5 3.5-1.7.9-.2 1.8-.4 3-1.2 2.2-1.6 1.9-5.5 1.8-5.7z"
                          class="mediatweetsvgpath"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="name leftallpd">
                <div class="profileimg">
                  <img
                    src="https://i.pinimg.com/originals/de/bb/9c/debb9c69e89ef2b79baccff94642a034.jpg"
                    alt=""
                    class="pimg"
                  />
                </div>
                <div class="personname">Anmol Verma</div>
              </div>
            </nav>
          </div>
        </div>
        <div class="vline"></div>
        <div class="centre">
          <div class="centreall">
            <div class="home">
              <a href="home.html" class="linkstyle">Home</a>
              <a href="toptweet.html"></a>
            </div>
            <div class="hline"></div>
          </div>
          <div class="writetweet">
            <div class="profileimgcentre">
              <img
                src="https://i.pinimg.com/originals/de/bb/9c/debb9c69e89ef2b79baccff94642a034.jpg"
                alt=""
                class="pimgcentre"
              />
            </div>
            <div class="wtweet">
              <input
                type="text"
                name=""
                id=""
                class="witweet"
                placeholder="What's happening?"
              />
            </div>
            <div class="tweetpost">Tweet</div>
          </div>
          <div class="htline"></div>
          <div class="person2 otheruser">
            <div class="userdetails">
              <div class="otherpropic space-in-word-of-tweet">
                <img
                  src="https://source.unsplash.com/45x45/?boy"
                  alt="img"
                  class="otherimg"
                />
              </div>
              <div class="otherusername space-in-word-of-tweet">Joe Mama</div>
              <div class="otherusertag space-in-word-of-tweet">@joemama</div>
              <div class="uplodetime space-in-word-of-tweet">11m</div>
            </div>

            <div class="usercontent">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Necessitatibus reprehenderit similique numquam maiores! Nemo,
              alias placeat. Unde ratione quasi, eaque molestias quo sunt autem
              corrupti neque eligendi, alias ad quas!
            </div>
            <div class="userupimage">
              <img
                src="https://source.unsplash.com/480x360/?fruit"
                alt="img"
                class="givenimage"
              />
            </div>
            <div class="usertweetoptions">
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-message-circle"
                >
                  <path
                    d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
                    class="reply"
                  />
                </svg>
                <div class="replycount">117</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-repeat"
                >
                  <polyline points="17 1 21 5 17 9"></polyline>
                  <path d="M3 11V9a4 4 0 0 1 4-4h14" class="retgreen"></path>
                  <polyline points="7 23 3 19 7 15"></polyline>
                  <path d="M21 13v2a4 4 0 0 1-4 4H3" class="retgreen"></path>
                </svg>
                <div class="tweetcount">187</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-heart"
                >
                  <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                    class="heartred"
                  ></path>
                </svg>
                <div class="heartcount">7.9k</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-share"
                >
                  <path
                    d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
                    class="reply"
                  ></path>
                  <polyline points="16 6 12 2 8 6"></polyline>
                  <line x1="12" y1="2" x2="12" y2="15"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="htline"></div>
          <div class="person3 otheruser">
            <div class="userdetails">
              <div class="otherpropic space-in-word-of-tweet">
                <img
                  src="https://source.unsplash.com/45x45/?girl"
                  alt="img"
                  class="otherimg"
                />
              </div>
              <div class="otherusername space-in-word-of-tweet">Meme Girl</div>
              <div class="otherusertag space-in-word-of-tweet">@memegirl</div>
              <div class="uplodetime space-in-word-of-tweet">17m</div>
            </div>

            <div class="usercontent">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil
              excepturi inventore ullam ipsa qui animi? Quo nesciunt eos earum
              rem sunt nam doloremque, illo, magnam labore error architecto amet
              culpa enim aut nulla. Reiciendis eum nihil dignissimos, harum quae
              pariatur, eveniet temporibus explicabo deleniti a, modi culpa.
              Autem laboriosam iure aliquam quaerat, harum laudantium obcaecati.
            </div>
            <div class="userupimage">
              <img
                src="https://source.unsplash.com/480x360/?garden"
                alt="img"
                class="givenimage"
              />
            </div>
            <div class="usertweetoptions">
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-message-circle"
                >
                  <path
                    d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
                    class="reply"
                  />
                </svg>
                <div class="replycount">107</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-repeat"
                >
                  <polyline points="17 1 21 5 17 9"></polyline>
                  <path d="M3 11V9a4 4 0 0 1 4-4h14" class="retgreen"></path>
                  <polyline points="7 23 3 19 7 15"></polyline>
                  <path d="M21 13v2a4 4 0 0 1-4 4H3" class="retgreen"></path>
                </svg>
                <div class="tweetcount">203</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-heart"
                >
                  <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                    class="heartred"
                  ></path>
                </svg>
                <div class="heartcount">1.3k</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-share"
                >
                  <path
                    d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
                    class="reply"
                  ></path>
                  <polyline points="16 6 12 2 8 6"></polyline>
                  <line x1="12" y1="2" x2="12" y2="15"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="htline"></div>
          <div class="person4 otheruser">
            <div class="userdetails">
              <div class="otherpropic space-in-word-of-tweet">
                <img
                  src="https://source.unsplash.com/45x45/?trump"
                  alt="img"
                  class="otherimg"
                />
              </div>
              <div class="otherusername space-in-word-of-tweet">
                Donald Trump
              </div>
              <div class="otherusertag space-in-word-of-tweet">
                @DonaldTrump
              </div>
              <div class="uplodetime space-in-word-of-tweet">20m</div>
            </div>

            <div class="usercontent">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo in
              sint vitae ut alias!
            </div>
            <div class="userupimage">
              <img
                src="https://source.unsplash.com/480x360/?trump"
                alt="img"
                class="givenimage"
              />
            </div>
            <div class="usertweetoptions">
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-message-circle"
                >
                  <path
                    d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
                    class="reply"
                  />
                </svg>
                <div class="replycount">854</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-repeat"
                >
                  <polyline points="17 1 21 5 17 9"></polyline>
                  <path d="M3 11V9a4 4 0 0 1 4-4h14" class="retgreen"></path>
                  <polyline points="7 23 3 19 7 15"></polyline>
                  <path d="M21 13v2a4 4 0 0 1-4 4H3" class="retgreen"></path>
                </svg>
                <div class="tweetcount">455</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-heart"
                >
                  <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                    class="heartred"
                  ></path>
                </svg>
                <div class="heartcount">23.7k</div>
              </div>
              <div class="replybox">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="feather feather-share"
                >
                  <path
                    d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
                    class="reply"
                  ></path>
                  <polyline points="16 6 12 2 8 6"></polyline>
                  <line x1="12" y1="2" x2="12" y2="15"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="htline"></div>
        </div>
        <div class="vline"></div>
        <div class="right">
          <div class="searchtwitter">
            <div class="search">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-search"
              >
                <circle cx="11" cy="11" r="8" class="searchsvg"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
              <input
                type="text"
                placeholder="Search Twitter"
                class="intwitter__search__textbox"
              />
            </div>
          </div>
          <div class="whatshappiningcontainer">
            <div class="whatshappining">
              <h3 class="trending">What's happining</h3>
              <div class="hline"></div>
              <div class="trending trendingbox">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta,
                est?
              </div>
              <div class="hline"></div>
              <div class="trending trendingbox">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi,
                quisquam commodi?
              </div>
              <div class="hline"></div>
              <div class="trending trendingbox">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
                quidem at, quis, optio sint dignissimos dolor soluta ex, modi
                ipsam recusandae reprehenderit?
              </div>
              <div class="hline"></div>
              <div class="trending trendingbox">
                Lorem ipsum dolor sit amet.
              </div>
              <div class="hline"></div>
              <div class="trending trendingbox">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
                corrupti ea est. Quam, illum molestiae. Delectus esse quas in id
                numquam quae mollitia aliquid iure reiciendis! At porro ut
                quaerat.
              </div>
              <div class="hline"></div>
              <div class="showmore trending trendingbox">Show More</div>
            </div>
          </div>
          <div class="whotofollow">
            <div class="boxwhotofollow">
              <h2 class="headlinewhotofollow"><b>Who to follow</b></h2>
              <div class="hline"></div>
              <div class="tofollowone tofollow">
                <div class="tofollowleft">
                  <div class="tofollowprofileimg">
                    <img
                      src="https://paganresearch.io/images/SpaceX.jpg"
                      alt="SpaceX"
                    />
                  </div>
                  <div class="tofollowname">
                    <div class="nametofollow">SpaceX</div>
                    <div class="adressnametofollow">@SpaceX</div>
                  </div>
                  <div class="tick">
                    <svg
                      height="12pt"
                      viewBox="0 0 496 496.01461"
                      width="12pt"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m494.492188 243.308594-37.25-51.386719 6.601562-63.109375c.359375-3.449219-1.539062-6.734375-4.707031-8.144531l-57.980469-25.800781-25.800781-57.984376c-1.417969-3.160156-4.699219-5.054687-8.144531-4.710937l-63.121094 6.597656-51.382813-37.246093c-2.800781-2.03125-6.589843-2.03125-9.390625 0l-51.386718 37.246093-63.117188-6.597656c-3.441406-.328125-6.710938 1.5625-8.144531 4.703125l-25.800781 57.984375-57.984376 25.808594c-3.164062 1.40625-5.0625 4.691406-4.703124 8.136719l6.597656 63.117187-37.246094 51.386719c-2.03125 2.800781-2.03125 6.589844 0 9.390625l37.246094 51.382812-6.597656 63.121094c-.363282 3.445313 1.535156 6.734375 4.703124 8.144531l57.984376 25.800782 25.800781 57.984374c1.425781 3.148438 4.699219 5.042969 8.144531 4.710938l63.117188-6.601562 51.386718 37.25c2.800782 2.03125 6.589844 2.03125 9.390625 0l51.382813-37.25 63.121094 6.601562c3.445312.347656 6.722656-1.546875 8.144531-4.703125l25.800781-57.984375 57.980469-25.808594c3.164062-1.410156 5.0625-4.691406 4.707031-8.136718l-6.601562-63.121094 37.25-51.382813c2.035156-2.800781 2.035156-6.597656 0-9.398437zm-52 53.863281c-1.160157 1.597656-1.6875 3.566406-1.480469 5.527344l6.304687 60.382812-55.480468 24.699219c-1.8125.796875-3.265626 2.242188-4.066407 4.054688l-24.679687 55.480468-60.398438-6.3125c-1.960937-.203125-3.925781.328125-5.519531 1.488282l-49.160156 35.632812-49.167969-35.632812c-1.363281-.996094-3.003906-1.53125-4.6875-1.527344-.28125 0-.5625 0-.800781.039062l-60.402344 6.3125-24.679687-55.480468c-.804688-1.8125-2.25-3.261719-4.0625-4.066407l-55.511719-24.6875 6.304687-60.382812c.203125-1.960938-.324218-3.929688-1.480468-5.527344l-35.632813-49.167969 35.632813-49.167968c1.15625-1.597657 1.683593-3.566407 1.480468-5.527344l-6.304687-60.386719 55.480469-24.695313c1.8125-.796874 3.261718-2.242187 4.0625-4.054687l24.679687-55.480469 60.402344 6.3125c1.957031.195313 3.921875-.335937 5.519531-1.488281l49.167969-35.632813 49.167969 35.632813c1.59375 1.15625 3.558593 1.683594 5.519531 1.488281l60.398437-6.3125 24.679688 55.480469c.804687 1.8125 2.253906 3.257813 4.066406 4.0625l55.480469 24.6875-6.304688 60.386719c-.207031 1.960937.320313 3.929687 1.480469 5.527344l35.628906 49.167968zm0 0"
                        class="ticksvg"
                      />
                      <path
                        d="m341.425781 157.308594c-3.125-3.125-8.1875-3.125-11.3125 0l-130.101562 130.101562-39.625-39.550781c-3.121094-3.113281-8.175781-3.113281-11.296875 0l-22.679688 22.542969c-1.503906 1.5-2.351562 3.539062-2.351562 5.664062s.847656 4.164063 2.351562 5.664063l67.921875 67.921875c3.121094 3.121094 8.1875 3.121094 11.3125 0l158.398438-158.402344c3.121093-3.121094 3.121093-8.1875 0-11.3125zm-141.414062 175.382812-56.601563-56.601562 11.3125-11.285156 39.640625 39.558593c3.121094 3.117188 8.179688 3.117188 11.304688 0l130.101562-130.089843 11.328125 11.328124zm0 0"
                        class="ticksvg"
                      />
                    </svg>
                  </div>
                </div>

                <div class="followbuttonbox">
                  <div class="tofollowbutton">Follow</div>
                </div>
              </div>
              <div class="hline"></div>
              <div class="tofollowtwo tofollow">
                <div class="tofollowleft">
                  <div class="tofollowprofileimg">
                    <img
                      src="https://yt3.ggpht.com/ytc/AAUvwnh7CHDDIuu6a87VwcIoDe-UeDb-Cfu8Ig8utAcGBDw=s900-c-k-c0x00ffffff-no-rj"
                      alt="Narendra Modi"
                    />
                  </div>
                  <div class="tofollowname">
                    <div class="nametofollow">Narendra Modi</div>
                    <!-- <div class="mqnametofollow">Nar...</div> -->
                    <div class="adressnametofollow">@NarendraModi</div>
                  </div>
                  <div class="tick">
                    <svg
                      height="12pt"
                      viewBox="0 0 496 496.01461"
                      width="12pt"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m494.492188 243.308594-37.25-51.386719 6.601562-63.109375c.359375-3.449219-1.539062-6.734375-4.707031-8.144531l-57.980469-25.800781-25.800781-57.984376c-1.417969-3.160156-4.699219-5.054687-8.144531-4.710937l-63.121094 6.597656-51.382813-37.246093c-2.800781-2.03125-6.589843-2.03125-9.390625 0l-51.386718 37.246093-63.117188-6.597656c-3.441406-.328125-6.710938 1.5625-8.144531 4.703125l-25.800781 57.984375-57.984376 25.808594c-3.164062 1.40625-5.0625 4.691406-4.703124 8.136719l6.597656 63.117187-37.246094 51.386719c-2.03125 2.800781-2.03125 6.589844 0 9.390625l37.246094 51.382812-6.597656 63.121094c-.363282 3.445313 1.535156 6.734375 4.703124 8.144531l57.984376 25.800782 25.800781 57.984374c1.425781 3.148438 4.699219 5.042969 8.144531 4.710938l63.117188-6.601562 51.386718 37.25c2.800782 2.03125 6.589844 2.03125 9.390625 0l51.382813-37.25 63.121094 6.601562c3.445312.347656 6.722656-1.546875 8.144531-4.703125l25.800781-57.984375 57.980469-25.808594c3.164062-1.410156 5.0625-4.691406 4.707031-8.136718l-6.601562-63.121094 37.25-51.382813c2.035156-2.800781 2.035156-6.597656 0-9.398437zm-52 53.863281c-1.160157 1.597656-1.6875 3.566406-1.480469 5.527344l6.304687 60.382812-55.480468 24.699219c-1.8125.796875-3.265626 2.242188-4.066407 4.054688l-24.679687 55.480468-60.398438-6.3125c-1.960937-.203125-3.925781.328125-5.519531 1.488282l-49.160156 35.632812-49.167969-35.632812c-1.363281-.996094-3.003906-1.53125-4.6875-1.527344-.28125 0-.5625 0-.800781.039062l-60.402344 6.3125-24.679687-55.480468c-.804688-1.8125-2.25-3.261719-4.0625-4.066407l-55.511719-24.6875 6.304687-60.382812c.203125-1.960938-.324218-3.929688-1.480468-5.527344l-35.632813-49.167969 35.632813-49.167968c1.15625-1.597657 1.683593-3.566407 1.480468-5.527344l-6.304687-60.386719 55.480469-24.695313c1.8125-.796874 3.261718-2.242187 4.0625-4.054687l24.679687-55.480469 60.402344 6.3125c1.957031.195313 3.921875-.335937 5.519531-1.488281l49.167969-35.632813 49.167969 35.632813c1.59375 1.15625 3.558593 1.683594 5.519531 1.488281l60.398437-6.3125 24.679688 55.480469c.804687 1.8125 2.253906 3.257813 4.066406 4.0625l55.480469 24.6875-6.304688 60.386719c-.207031 1.960937.320313 3.929687 1.480469 5.527344l35.628906 49.167968zm0 0"
                        class="ticksvg"
                      />
                      <path
                        d="m341.425781 157.308594c-3.125-3.125-8.1875-3.125-11.3125 0l-130.101562 130.101562-39.625-39.550781c-3.121094-3.113281-8.175781-3.113281-11.296875 0l-22.679688 22.542969c-1.503906 1.5-2.351562 3.539062-2.351562 5.664062s.847656 4.164063 2.351562 5.664063l67.921875 67.921875c3.121094 3.121094 8.1875 3.121094 11.3125 0l158.398438-158.402344c3.121093-3.121094 3.121093-8.1875 0-11.3125zm-141.414062 175.382812-56.601563-56.601562 11.3125-11.285156 39.640625 39.558593c3.121094 3.117188 8.179688 3.117188 11.304688 0l130.101562-130.089843 11.328125 11.328124zm0 0"
                        class="ticksvg"
                      />
                    </svg>
                  </div>
                </div>
                <div class="followbuttonbox">
                  <div class="tofollowbutton">Follow</div>
                </div>
              </div>
              <div class="hline"></div>
              <div class="tofollowthree tofollow">
                <div class="tofollowleft">
                  <div class="tofollowprofileimg">
                    <img
                      src="https://pbs.twimg.com/profile_images/1111257701835788290/7U7PLuAK.jpg"
                      alt="Kevin Powell"
                    />
                  </div>
                  <div class="tofollowname">
                    <div class="nametofollow">Kevin Powell</div>
                    <div class="adressnametofollow">@KevinJPowell</div>
                  </div>
                  <div class="tick">
                    <svg
                      height="12pt"
                      viewBox="0 0 496 496.01461"
                      width="12pt"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m494.492188 243.308594-37.25-51.386719 6.601562-63.109375c.359375-3.449219-1.539062-6.734375-4.707031-8.144531l-57.980469-25.800781-25.800781-57.984376c-1.417969-3.160156-4.699219-5.054687-8.144531-4.710937l-63.121094 6.597656-51.382813-37.246093c-2.800781-2.03125-6.589843-2.03125-9.390625 0l-51.386718 37.246093-63.117188-6.597656c-3.441406-.328125-6.710938 1.5625-8.144531 4.703125l-25.800781 57.984375-57.984376 25.808594c-3.164062 1.40625-5.0625 4.691406-4.703124 8.136719l6.597656 63.117187-37.246094 51.386719c-2.03125 2.800781-2.03125 6.589844 0 9.390625l37.246094 51.382812-6.597656 63.121094c-.363282 3.445313 1.535156 6.734375 4.703124 8.144531l57.984376 25.800782 25.800781 57.984374c1.425781 3.148438 4.699219 5.042969 8.144531 4.710938l63.117188-6.601562 51.386718 37.25c2.800782 2.03125 6.589844 2.03125 9.390625 0l51.382813-37.25 63.121094 6.601562c3.445312.347656 6.722656-1.546875 8.144531-4.703125l25.800781-57.984375 57.980469-25.808594c3.164062-1.410156 5.0625-4.691406 4.707031-8.136718l-6.601562-63.121094 37.25-51.382813c2.035156-2.800781 2.035156-6.597656 0-9.398437zm-52 53.863281c-1.160157 1.597656-1.6875 3.566406-1.480469 5.527344l6.304687 60.382812-55.480468 24.699219c-1.8125.796875-3.265626 2.242188-4.066407 4.054688l-24.679687 55.480468-60.398438-6.3125c-1.960937-.203125-3.925781.328125-5.519531 1.488282l-49.160156 35.632812-49.167969-35.632812c-1.363281-.996094-3.003906-1.53125-4.6875-1.527344-.28125 0-.5625 0-.800781.039062l-60.402344 6.3125-24.679687-55.480468c-.804688-1.8125-2.25-3.261719-4.0625-4.066407l-55.511719-24.6875 6.304687-60.382812c.203125-1.960938-.324218-3.929688-1.480468-5.527344l-35.632813-49.167969 35.632813-49.167968c1.15625-1.597657 1.683593-3.566407 1.480468-5.527344l-6.304687-60.386719 55.480469-24.695313c1.8125-.796874 3.261718-2.242187 4.0625-4.054687l24.679687-55.480469 60.402344 6.3125c1.957031.195313 3.921875-.335937 5.519531-1.488281l49.167969-35.632813 49.167969 35.632813c1.59375 1.15625 3.558593 1.683594 5.519531 1.488281l60.398437-6.3125 24.679688 55.480469c.804687 1.8125 2.253906 3.257813 4.066406 4.0625l55.480469 24.6875-6.304688 60.386719c-.207031 1.960937.320313 3.929687 1.480469 5.527344l35.628906 49.167968zm0 0"
                        class="ticksvg"
                      />
                      <path
                        d="m341.425781 157.308594c-3.125-3.125-8.1875-3.125-11.3125 0l-130.101562 130.101562-39.625-39.550781c-3.121094-3.113281-8.175781-3.113281-11.296875 0l-22.679688 22.542969c-1.503906 1.5-2.351562 3.539062-2.351562 5.664062s.847656 4.164063 2.351562 5.664063l67.921875 67.921875c3.121094 3.121094 8.1875 3.121094 11.3125 0l158.398438-158.402344c3.121093-3.121094 3.121093-8.1875 0-11.3125zm-141.414062 175.382812-56.601563-56.601562 11.3125-11.285156 39.640625 39.558593c3.121094 3.117188 8.179688 3.117188 11.304688 0l130.101562-130.089843 11.328125 11.328124zm0 0"
                        class="ticksvg"
                      />
                    </svg>
                  </div>
                </div>
                <div class="followbuttonbox">
                  <div class="tofollowbutton">Follow</div>
                </div>
              </div>
              <div class="seemoretofollow tofollow">See More</div>
            </div>
          </div>
          <div class="copyright">
            <!-- <div class="hline"></div> -->
            <div class="termsser">
              <p>Terms of services</p>
              <p>Privacy Policies</p>
              <p>Cookie Policy</p>
            </div>
            <div class="addcopyright">
              <p>Add Info</p>
              <p>More...</p>
              <p>&copy;2021 Twitter,Inc.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer></footer>
</body>
</html>

2. By Sonali Hirave

Made by Sonali Hirave. Twitter Clone Made using Tailwind CSS. Source

css twitter clone by sonali hirave
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
          <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body class="bg-blue-900 h-screen">
        <div class="flex">

            <div class="w-2/5 text-white h-12 pl-32 py-4 h-auto">
                <!--left menu-->
              <svg viewBox="0 0 24 24" class="h-12 w-12 text-white" fill="currentColor"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
              
              <nav class="mt-5 px-2">
                <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-semibold rounded-full bg-blue-800 text-blue-300">
              <svg class="mr-4 h-6 w-6 " stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"/>
              </svg>
              Home
            </a>
            <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-semibold rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
              
              Explore
            </a>
            <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
             Notifications
            </a>
            <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
              Messages
            </a>
            <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
              Bookmarks
            </a>
            <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              Lists
            </a>
                <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
              Profile
            </a>
                <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
              <svg class="mr-4 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              More
            </a>
                
                <button class="bg-blue-400 w-48 mt-5 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full">
  Tweet
</button>
          </nav>
              
        <div class="flex-shrink-0 flex hover:bg-blue-00 rounded-full p-4 mt-12 mr-2">
          <a href="#" class="flex-shrink-0 group block">
            <div class="flex items-center">
              <div>
                <img class="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
              </div>
              <div class="ml-3">
                <p class="text-base leading-6 font-medium text-white">
                  Sonali Hirave
                </p>
                <p class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                  @ShonaDesign
                </p>
              </div>
            </div>
          </a>
        </div>
              
        </div>

            <div class="w-3/5 border border-gray-600 h-auto  border-t-0">
                <!--middle wall-->
             
                <div class="flex">
                    <div class="flex-1 m-2">
                        <h2 class="px-4 py-2 text-xl font-semibold text-white">Home</h2>
                    </div>
                    <div class="flex-1 px-4 py-2 m-2">
                        <a href="" class=" text-2xl font-medium rounded-full text-white hover:bg-blue-800 hover:text-blue-300 float-right">
                            <svg class="m-2 h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><g><path d="M22.772 10.506l-5.618-2.192-2.16-6.5c-.102-.307-.39-.514-.712-.514s-.61.207-.712.513l-2.16 6.5-5.62 2.192c-.287.112-.477.39-.477.7s.19.585.478.698l5.62 2.192 2.16 6.5c.102.306.39.513.712.513s.61-.207.712-.513l2.16-6.5 5.62-2.192c.287-.112.477-.39.477-.7s-.19-.585-.478-.697zm-6.49 2.32c-.208.08-.37.25-.44.46l-1.56 4.695-1.56-4.693c-.07-.21-.23-.38-.438-.462l-4.155-1.62 4.154-1.622c.208-.08.37-.25.44-.462l1.56-4.693 1.56 4.694c.07.212.23.382.438.463l4.155 1.62-4.155 1.622zM6.663 3.812h-1.88V2.05c0-.414-.337-.75-.75-.75s-.75.336-.75.75v1.762H1.5c-.414 0-.75.336-.75.75s.336.75.75.75h1.782v1.762c0 .414.336.75.75.75s.75-.336.75-.75V5.312h1.88c.415 0 .75-.336.75-.75s-.335-.75-.75-.75zm2.535 15.622h-1.1v-1.016c0-.414-.335-.75-.75-.75s-.75.336-.75.75v1.016H5.57c-.414 0-.75.336-.75.75s.336.75.75.75H6.6v1.016c0 .414.335.75.75.75s.75-.336.75-.75v-1.016h1.098c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"></path></g>
                            </svg>
                        </a>
                    </div>
                </div>

                <hr class="border-gray-600">
                <!--middle creat tweet-->
                <div class="flex">
                    <div class="m-2 w-10 py-1">
                        <img class="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                    </div>
                    <div class="flex-1 px-2 pt-2 mt-2">
                        <textarea class=" bg-transparent text-gray-400 font-medium text-lg w-full" rows="2" cols="50" placeholder="What's happening?"></textarea>
                    </div>                    
                </div>
                <!--middle creat tweet below icons-->
                <div class="flex">
                    <div class="w-10"></div>

                    <div class="w-64 px-2">
                        
                        <div class="flex items-center">
                            <div class="flex-1 text-center px-1 py-1 m-2">
                                <a href="#" class="mt-1 group flex items-center text-blue-400 px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                  </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="mt-1 group flex items-center text-blue-400 px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="mt-1 group flex items-center text-blue-400 px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="mt-1 group flex items-center text-blue-400 px-2 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </a>
                            </div>
                        </div>
                    </div>

                    <div class="flex-1">
                        <button class="bg-blue-400 mt-5 hover:bg-blue-600 text-white font-bold py-2 px-8 rounded-full mr-8 float-right">
                            Tweet
                          </button>
                    </div>
                </div>

                <hr class="border-blue-800 border-4">

                
            <div>
            </div>



            <!--first tweet start-->
            <div class="flex flex-shrink-0 p-4 pb-0">
                <a href="#" class="flex-shrink-0 group block">
                  <div class="flex items-center">
                    <div>
                      <img class="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                    </div>
                    <div class="ml-3">
                      <p class="text-base leading-6 font-medium text-white">
                        Sonali Hirave 
                        <span class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                            @ShonaDesign . 16 April
                          </span>
                           </p>
                    </div>
                  </div>
                </a>
            </div>
            <div class="pl-16">
                <p class="text-base width-auto font-medium text-white flex-shrink">
                  Day 07 of the challenge <span class="text-blue-400">#100DaysOfCode</span> 
                  I was wondering what I can do with <span class="text-blue-400">#tailwindcss</span>, so just started building Twitter  UI using Tailwind and so far it looks so promising. I will post my code after completion.
                  [07/100]
                  <span class="text-blue-400"> #WomenWhoCode #CodeNewbie</span>
                </p>


                <div class="flex">
                    <div class="w-full">
                        
                        <div class="flex items-center">
                            <div class="flex-1 text-center">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                                  </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                            </a>
                            </div>
                        </div>
                    </div>

                
                </div>
                
              </div>
              <hr class="border-gray-600">

                <!--second tweet-->

              <div class="flex flex-shrink-0 p-4 pb-0">
                <a href="#" class="flex-shrink-0 group block">
                  <div class="flex items-center">
                    <div>
                      <img class="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                    </div>
                    <div class="ml-3">
                      <p class="text-base leading-6 font-medium text-white">
                        Sonali Hirave 
                        <span class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                            @ShonaDesign . 16 April
                          </span>
                           </p>
                    </div>
                  </div>
                </a>
            </div>


            <div class="pl-16">
                <p class="text-base width-auto font-medium text-white flex-shrink">
                  Day 07 of the challenge <span class="text-blue-400">#100DaysOfCode</span> 
                  I was wondering what I can do with <span class="text-blue-400">#tailwindcss</span>, so just started building Twitter  UI using Tailwind and so far it looks so promising. I will post my code after completion.
                  [07/100]
                  <span class="text-blue-400"> #WomenWhoCode #CodeNewbie</span>
                </p>

                <div class="md:flex-shrink pr-6 pt-3">
                    <img class="rounded-lg w-full h-64" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
                  </div>
                <div class="flex">
                    <div class="w-full">
                        
                        <div class="flex items-center">
                            <div class="flex-1 text-center">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                                  </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                            </a>
                            </div>
                        </div>
                    </div>

                
                </div>
                
              </div>
              <hr class="border-gray-600">




              <!--third tweet-->

              <div class="flex flex-shrink-0 p-4 pb-0">
                <a href="#" class="flex-shrink-0 group block">
                  <div class="flex items-center">
                    <div>
                      <img class="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                    </div>
                    <div class="ml-3">
                      <p class="text-base leading-6 font-medium text-white">
                        Sonali Hirave 
                        <span class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                            @ShonaDesign . 16 April
                          </span>
                           </p>
                    </div>
                  </div>
                </a>
            </div>
            <div class="pl-16">
                <p class="text-base width-auto font-medium text-white flex-shrink">
                  Day 07 of the challenge <span class="text-blue-400">#100DaysOfCode</span> 
                  I was wondering what I can do with <span class="text-blue-400">#tailwindcss</span>, so just started building Twitter  UI using Tailwind and so far it looks so promising. I will post my code after completion.
                  [07/100]
                  <span class="text-blue-400"> #WomenWhoCode #CodeNewbie</span>
                </p>

        
                <div class="flex">
                    <div class="w-full">
                        
                        <div class="flex items-center">
                            <div class="flex-1 text-center">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                                  </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                                </a>
                            </div>

                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"></path></svg>
                            </a>
                            </div>
                            <div class="flex-1 text-center py-2 m-2">
                                <a href="#" class="w-12 mt-1 group flex items-center text-gray-500 px-3 py-2 text-base leading-6 font-medium rounded-full hover:bg-blue-800 hover:text-blue-300">
                                    <svg class="text-center h-7 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                            </a>
                            </div>
                        </div>
                    </div>

                
                </div>
                
              </div>
              <hr class="border-gray-600">

        </div>


            <div class="w-2/5 h-12">
                <!--right menu-->

                <div class="relative text-gray-300 w-80 p-5 pb-0 mr-16">
                    <button type="submit" class="absolute ml-4 mt-3 mr-4">
                        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
                          <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
                        </svg>
                      </button>

                    <input type="search" name="search" placeholder="Search Twitter" class="bg-blue-800 h-10 px-10 pr-5 w-full rounded-full text-sm focus:outline-none bg-purple-white shadow rounded border-0">
                    
                </div>
        


                    <!--second-trending tweet section-->
                <div class="max-w-sm rounded-lg bg-blue-800 overflow-hidden shadow-lg m-4 mr-20">
                    <div class="flex">
                        <div class="flex-1 m-2">
                            <h2 class="px-4 py-2 text-xl w-48 font-semibold text-white">Germany trends</h2>
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" text-2xl rounded-full text-white hover:bg-blue-800 hover:text-blue-300 float-right">
                                <svg class="m-2 h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            </a>
                        </div>
                    </div>

    
                    <hr class="border-gray-600">

                        <!--first trending tweet-->
                    <div class="flex">
                        <div class="flex-1">
                            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">1 . Trending</p>
                            <h2 class="px-4 ml-2 w-48 font-bold text-white">#Microsoft363</h2>
                            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">5,466 Tweets</p>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-blue-800 hover:text-blue-300 float-right">
                                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                            </a>
                        </div>
                    </div>
                    <hr class="border-gray-600">

                    <!--second trending tweet-->

                    <div class="flex">
                        <div class="flex-1">
                            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">2 .  Politics . Trending</p>
                            <h2 class="px-4 ml-2 w-48 font-bold text-white">#HI-Fashion</h2>
                            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">8,464 Tweets</p>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-blue-800 hover:text-blue-300 float-right">
                                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                            </a>
                        </div>
                    </div>
                    <hr class="border-gray-600">

                    <!--third trending tweet-->

                    <div class="flex">
                        <div class="flex-1">
                            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">3 .  Rock . Trending</p>
                            <h2 class="px-4 ml-2 w-48 font-bold text-white">#Ferrari</h2>
                            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">5,586 Tweets</p>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-blue-800 hover:text-blue-300 float-right">
                                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                            </a>
                        </div>
                    </div>
                    <hr class="border-gray-600">

                    <!--forth trending tweet-->

                    <div class="flex">
                        <div class="flex-1">
                            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">4 . Auto Racing . Trending</p>
                            <h2 class="px-4 ml-2 w-48 font-bold text-white">#vettel</h2>
                            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">9,416 Tweets</p>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-blue-800 hover:text-blue-300 float-right">
                                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                            </a>
                        </div>
                    </div>
                    <hr class="border-gray-600">

                    <!--show more-->

                    <div class="flex">
                        <div class="flex-1 p-4">
                            <h2 class="px-4 ml-2 w-48 font-bold text-blue-400">Show more</h2>  
                        </div>
                    </div>
                
                </div>


                <!--third-people suggetion to follow section-->
                
                <div class="max-w-sm rounded-lg bg-blue-800 overflow-hidden shadow-lg m-4 mr-20">
                    <div class="flex">
                        <div class="flex-1 m-2">
                            <h2 class="px-4 py-2 text-xl w-48 font-semibold text-white">Who to follow</h2>
                        </div>
                    </div>

    
                    <hr class="border-gray-600">

                        <!--first person who to follow--> 
                        
                    <div class="flex flex-shrink-0">
                        <div class="flex-1 ">
                            <div class="flex items-center w-48">
                                <div>
                                  <img class="inline-block h-10 w-auto rounded-full ml-4 mt-2" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                                </div>
                                <div class="ml-3 mt-3">
                                  <p class="text-base leading-6 font-medium text-white">
                                    Sonali Hirave
                                  </p>
                                  <p class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                                    @ShonaDesign
                                  </p>
                                </div>
                              </div>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" float-right">
                                <button class="bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded-full">
                                    Follow
                                  </button>  
                            </a>
                            
                        </div>
                    </div>
                    <hr class="border-gray-600">

                    <!--second person who to follow--> 
                        
                    <div class="flex flex-shrink-0">
                        <div class="flex-1 ">
                            <div class="flex items-center w-48">
                                <div>
                                  <img class="inline-block h-10 w-auto rounded-full ml-4 mt-2" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
                                </div>
                                <div class="ml-3 mt-3">
                                  <p class="text-base leading-6 font-medium text-white">
                                    Sonali Hirave
                                  </p>
                                  <p class="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
                                    @ShonaDesign
                                  </p>
                                </div>
                              </div>
                            
                        </div>
                        <div class="flex-1 px-4 py-2 m-2">
                            <a href="" class=" float-right">
                                <button class="bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded-full">
                                    Follow
                                  </button>  
                            </a>
                            
                        </div>
                    </div>

                    <hr class="border-gray-600">

                   

                    <!--show more-->

                    <div class="flex">
                        <div class="flex-1 p-4">
                            <h2 class="px-4 ml-2 w-48 font-bold text-blue-400">Show more</h2>  
                        </div>
                    </div>
                
                </div>

            <div class="flow-root m-6 inline">
                <div class="flex-1">
                    <a href="#">
                    <p class="text-sm leading-6 font-medium text-gray-500">Terms Privacy Policy Cookies Imprint Ads info</p>
                </div>
            </a>
                <div class="flex-2">
                    <p class="text-sm leading-6 font-medium text-gray-600"> ยฉ 2020 Twitter, Inc.</p>
                </div>
                </div>
        </div>

    <div/>
</body>
</html>

3. By James B Murray

Made by James B Murray. Simple Twitter Clone made using CSS. Source

css twitter clone by james b murray
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.app-wrapper {
	display: flex;
	max-width: 1234px;
	margin: 0 auto;
}

.app-wrapper>aside {
	flex: 2;
}

.app-wrapper>main {
	flex: 10;
	padding-top: 25px;

}

.input-wrapper {
	display: flex;
}

.input-wrapper img {
	margin-right: 12px;
}

.profile-wrapper {
	display: flex;
}

.profile-wrapper img {
	margin-right: 12px;
}
.profile-info {
  display:flex;
  margin-top: 5px;
}
.profile-info div:last-child {
  display:flex;
  align-items:center;
}
.profile-name {
	font-size: 20x;
	font-weight: bold;
}
.profile-location {
  color: rgb(83, 100, 113);
  padding-left: 5px;
  font-size: 14px;
}
.reply {
	color: rgb(83, 100, 113);
}

.tweet-top {
	display: flex;
	justify-content: space-between;
	font-size: 20px;
	margin: 0 5px 24px 10px;
}

.tweet-data {
	font-family: Helvetica Neue;

}

.bi-stars {
	font-size: 20px;
}

.bi-arrow-left-right {
	padding-right: 10px;
}

.bi-three-dots {
	font-size: 15px;

}

.more-options-button {
	margin-left: auto;
	padding: 0 4px;
	height: inherit;
}

.more-options-button i {
	margin: 0;
}

.more-options-button:hover {
	color: rgb(29, 155, 240);
	background-color: rgb(29, 155, 240, 0.2);
}

.icon-share:hover {
	color: rgb(29, 155, 240);
	background-color: rgb(29, 155, 240, 0.2);
}

.icon-fav:hover {
	color: rgb(249, 124, 128);
	background-color: rgba(249, 124, 128, 0.2);
}

.icon-retweet:hover {
	color: rgb(0, 186, 124);
	background-color: rgba(0, 186, 124, 0.2);
}

.share-number:hover {
	color: rgb(29, 155, 240);
}

.retweet-number:hover {
	color: rgb(0, 186, 124);
}

.fav-number:hover {
	color: rgb(249, 124, 128);
}

.new-tweet {
	width: 100%;
	padding-left: 5px;
	border: transparent;
	font-size: 20px;
	outline-style: none;
}

.avatar {
	border-radius: 100%;
	padding-top: 4px;
	padding-left: 4px;

}

.logo {
	padding: 0px 18px;
	border-radius: 100%;
	color: rgb(29, 155, 240);
}

.logo:hover {
	background-color: rgb(29, 155, 240, 0.2);

}

.logo i {
	margin: 0;
}

.item-container {
	width: 348.5px;
	height: 100%;
	padding-left: 12px;
	padding-right: 15px;
}

ul {
	list-style-type: none;
}

button {
	display: inline-block;
	background-color: transparent;
	border-radius: 9999px;
	border: none;
	height: 56.2px;
	font-size: 20px;
	cursor: pointer;
	padding: 12px;
	text-align: center;
	margin: 4px 0;
	vertical-align: text-bottom;
	position: relative;
	max-width: 100%;
}

.tweet-icon {
	display: flex;
	margin-left: 40px;
	align-items: center;
	text-align: horizontal-align;

}

.tweet-icon i {
	color: rgb(29, 155, 240);
}

.icon-on-tweet:hover {
	background-color: rgba(29, 155, 240, 0.2);
}

.feed-icon {
	display: flex;
	align-content: space-evenly;
	justify-content: space-between;
	text-align: center;
	padding-left: 55px;
	padding-right: 55px;

}

.feed-icon i {
	margin: 0px;
}

.tweet-icon button i {
	margin-right: 0;
	font-size: 20px;
}

.tweet-icon>button:last-child {
	margin-left: auto;

}

.full-tweet-icon-button {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.full-tweet-icon-button.retweet button:hover+span {
	color: rgb(0, 186, 124);
}

.full-tweet-icon-button.comment button:hover+span {
	color: rgb(29, 155, 240);
}

.full-tweet-icon-button.favorite button:hover+span {
	color: rgb(249, 124, 128);
}

.basictweet {
	display: flex;
	color: rgb(255, 255, 255);
	background-color: rgb(29, 155, 240);
	align-items: center;
	width: 75.96px;
	height: 36px;
	margin-right: 40px;
}

.tweet-box {
	border-bottom: 1px gray solid;

}

.re-tweet-onprofile {
	display: flex;
	color: rgb(83, 100, 113);
	font-size: 13px;
	padding-left: 40px;
	padding-top: 5px;
	font-weight: 700;

}
.re-tweet-onprofile:hover {
  cursor:pointer;
  text-decoration:underline;
}
.tweet-wrapper {
	border-bottom: 1px gray solid;
}

.tweet-wrapper:hover {
	background-color: rgb(15, 20, 25, .1);

}

button:hover {
	background-color: rgb(15, 20, 25, .1);
}

button i {
	font-size: 24px;
	margin-right: 24px;
}

.tweet {
	background-color: rgb(29, 155, 240);
	transition-property: background-color, box-shadow;
	color: rgb(255, 255, 255);
	width: 225.89px;
	height: 50px;
	font-size: 17px;
	font-weight: 700;

}

.tweet:hover {
	background-color: #136eab;
}
.shared-photo {
  border-radius: 15px;
  margin-top: 20px;
}

.shared-photo-trending {
  border-radius: 15px;
  margin-top: 20px;
  margin-right: 10px;
}
.see-more {
  color:rgb(29, 155, 240);
}
.see-more:hover {
  cursor:pointer;
}
main {
	border-right: 1px solid #a4a6a5;
  border-left: 1px solid #a4a6a5;
	padding: 5px;

}
.search-box {
  display:flex;
  width:348px;
  height:42px;
  border-color: rgb(239, 243, 244);
  
  border: 1px solid gray;
  border-radius: 25px;
  font-size: 15px;
  margin-left: 10px;
}

.search-twitter {
  width:80%;
  border:none;
  outline:none;
  font-size:15px;
  
  
}
.bi-search {
  padding-top: 10px;
  padding-left: 20px;
  padding-right:5px;
  font-size: 20px;
  
}
.trending-topics {
  display: flex;
  flex-direction:column;
  margin: 10px 10px 0px;
  border-radius:25px;
  background-color: rgba(15, 20, 25, .1);
  
}
.trending-name {
  font-size:20px;
  font-weight: bold;
  padding-left: 25px;
  padding-top: 10px;
}
.topics-list-wrapper {
  display:flex;
  padding-left: 12px;
  margin: 5px;
}
.topics-list-wrapper:hover {
  background-color:rgba(15, 20, 25, .05);
  cursor:pointer;
 
}
.main-profile-wrapper {
  display:flex;
  font-weight:400;
  font-size:15px;
  margin: 5px;
}
.main-profile-wrapper:hover {
  cursor:pointer;
  border-radius:50px;
  padding: 5px;
  background-color:rgba(15, 20, 25, .05); 
}
.profile-more {
  display:flex;
  
}

.news{
  font-size:13px;
  color: rgb(83, 100, 113);
}

.headline {
  font-size: 15px;
  font-weight: 700;
}
.trending {
  font-size: 13px;
}
.hashtags {
 color:rgb(29, 155, 240);
}
.hashtags:hover {
  cursor:pointer;
  text-decoration:underline;
}
.tweet-communication{
  margin: 5px;
  margin-bottom: 5px;
}
.blue-check {
  color:rgb(29, 155, 240);
}
.show-more {
  font-size: 15px;
  font-weight: 700;
  color:rgb(29, 155, 240);
}

p {
  margin: 4px;
  padding: 0px;
}
.follow-avatar {
  border-radius: 100%;
  margin: 5px;
  
}
.follow-button {
  display:flex;
  align-items: center;
  background-color:black;
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight:700;
  height: 36px;
  margin-left: 12px;
  padding-left:16px;
  padding-right:16px;
  cursor: pointer;
}

.follow-button:hover {
  rgba:(255,255,255,0.5);
}

.terms-list {
  margin: 20px 0 0 20px;
  font-size: 14px;
  color: rgb(83, 100, 113);
  line-height:25px;  
}
.terms-list a {
  margin-right: 8px;
}
.terms-list a:hover {
  text-decoration:underline;
  cursor:pointer;
}

body {
  font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
  <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Twitter Clone</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  </head>
  <body>
    <div class="app-wrapper">
      <!-- navigation -->
      <aside>
        <nav class="item-container">
          <ul>
            <li>
              <button class='logo'>
                <i class="bi bi-twitter"></i>
              </button>
            <li>
              <button>
                <i class="bi bi-house-door"></i>Home </button>
            </li>
            <li>
              <button>
                <i class="bi bi-hash"></i>Explore </button>
            </li>
            <li>
              <button>
                <i class="bi bi-bell"></i>Notifications </button>
            </li>
            <li>
              <button>
                <i class="bi bi-envelope"></i>Messages </button>
            </li>
            <li>
              <button>
                <i class="bi bi-bookmark"></i>Bookmarks </button>
            </li>
            <li>
              <button>
                <i class="bi bi-list-check"></i>Lists </button>
            </li>
            <li>
              <button>
                <i class="bi bi-person"></i>Profile </button>
            </li>
            <li>
              <button>
                <i class="bi bi-three-dots"></i>More </button>
            </li>
            <li>
              <button class="tweet">Tweet</button>
            </li>
          </ul>
          <div class="main-profile-wrapper">
                <div>
                   <img class="follow-avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />                   </div>
                  <div class="profile-info">  
                    <div>
                      <p class="profile-name">Ashes to Omens<span class="blue-check"><i class="bi bi-patch-check-fill"></i></span></p>
                      <p class="profile-location">@ashestoOmens</p>
                    </div>  
                  <div class='profile-more'><i class="bi bi-three-dots"></i></div>
                </div>
            </div>
        </nav>
        
      </aside>
      <main>
        <!-- main section for scrolling and tweet input -->
        <div class="tweet-box">
          <div class="tweet-top">Home <i class="bi bi-stars"></i>
          </div>
          <div class="input-wrapper">
            <img class="avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />
            <input class="new-tweet" id='info' type='text' required placeholder='What&#39;s Happening?' />
          </div>
          <div class="tweet-icon">
            <button class="icon-on-tweet">
              <i class="bi bi-image"></i>
            </button>
            <button class="icon-on-tweet">
              <i class="bi bi-emoji-smile"></i>
            </button>
            <button class="icon-on-tweet">
              <i class="bi bi-bar-chart-line"></i>
            </button>
            <button class="icon-on-tweet">
              <i class="bi bi-calendar-date"></i>
            </button>
            <button class="icon-on-tweet">
              <i class="bi bi-camera-video"></i>
            </button>
            <button class="icon-on-tweet">
              <i class="bi bi-geo-alt"></i>
            </button>
            <button class="basictweet">Tweet</button>
          </div>
        </div>
        <div class="tweet-wrapper">
          <div class="re-tweet-onprofile">
            <i class="bi bi-arrow-left-right"></i>Radio-WIGWAM Retweeted <button class="more-options-button">
              <i class="bi bi-three-dots"></i>
            </button>
          </div>
          <div class="profile-wrapper">
            <div>
              <img class="avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />
            </div>
            <div class="tweet-data">
              <div class="profile-name">Town and Tower Records<span class="blue-check"><i class="bi bi-patch-check-fill"></i></span><span class="profile-location">@TownandTowerRecords</span></div>
              <div class="reply">Replying to</div>
              <div class="hashtags"> @RadioWigWam <span>and</span> @SplitVisions </div>
              <div class="tweet-communication">Awesome to see our Swedish brothers rocking out! </div>
            </div>
          </div>
          <div class="feed-icon">
            <div class="full-tweet-icon-button comment">
              <button class="icon-share">
                <i class="bi bi-chat"></i>
              </button>
              <span>810</span>
            </div>
            <div class="full-tweet-icon-button retweet">
              <button class="icon-retweet">
                <i class="bi bi-arrow-left-right"></i>
              </button>
              <span>102</span>
            </div>
            <div class="full-tweet-icon-button favorite">
              <button class="icon-fav">
                <i class="bi bi-heart"></i>
              </button>
              <span>652</span>
            </div>
            <div>
              <button class="icon-share">
                <i class="bi bi-arrow-bar-up"></i>
              </button>
            </div>
          </div>
        </div>
        <!-- Another Tweet -->
        <div class="tweet-wrapper">
          <div class="re-tweet-onprofile">
            <i class="bi bi-chat"></i>Small Stone Records Replied &middot; <div class="see-more">See More</div>
            <button class="more-options-button">
              <i class="bi bi-three-dots"></i>
            </button>
          </div>
          <div class="profile-wrapper">
            <div>
              <img class="avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />
            </div>
            <div class="tweet-data">
              <div class="profile-name">Ye Olde Coffee Shoppe <span class="profile-location">@OldWorldCoffee</span></div>
              <div class="tweet-communication">What the hell am I supposed to do with this?</div>
              <div>
                <img class="shared-photo" src="https://www.fillmurray.com/504/412" alt="twitterpic" />
              </div>
            </div>
          </div>
          <div class="feed-icon">
            <div class="full-tweet-icon-button comment">
              <button class="icon-share">
                <i class="bi bi-chat"></i>
              </button>
              <span>12</span>
            </div>
            <div class="full-tweet-icon-button retweet">
              <button class="icon-retweet">
                <i class="bi bi-arrow-left-right"></i>
              </button>
              <span>3</span>
            </div>
            <div class="full-tweet-icon-button favorite">
              <button class="icon-fav">
                <i class="bi bi-heart"></i>
              </button>
              <span>4</span>
            </div>
            <div>
              <button class="icon-share">
                <i class="bi bi-arrow-bar-up"></i>
              </button>
            </div>
          </div>
        </div>
        <!-- right nav section -->
      </main>
      <!-- right nav section -->
      <aside>
        <div class="search-box">
          <i class="bi bi-search"></i>
          <input class="search-twitter" id='search' type='text' required placeholder='Search Twitter' />
        </div>
        <div class="trending-topics">
          <div class="trending-name">What's Happening</div>
          <div class="topics-list-wrapper">
            <div>
              <p class="news">World News &middot; LAST NIGHT</p>
              <p class="headline">Record-breaking heatwaves prompt wildfires and multiple deaths across Europe.</p>
              <p class="trending">Trending with <span class="hashtags">#heatwave</span>, <span class="hashtags">#ClimateEmergency</span>
              </p>
            </div>
            <div>
              <img class="shared-photo-trending" src="https://www.fillmurray.com/68/68" alt="twitterpic" />
            </div>
          </div>
          <div class="topics-list-wrapper">
            <div>
              <p class="news">Entertainment &middot; TRENDING</p>
              <p class="headline">Bill Murray quoted as saying,
                "Fuck you, pay me."</p>
              <p class="trending">56.4K Tweets</p>
            </div>
            <div>
              <img class="shared-photo-trending" src="https://www.fillmurray.com/68/68" alt="twitterpic" />
            </div>
          </div>
          <div class="topics-list-wrapper">
            <div>
              <p class="news">The Hustle <span class="blue-check"><i class="bi bi-patch-check-fill"></i></span> 5 hours ago</p>
              <p class="headline">America's favorite family outings are increasingly out of reach.</p>
            </div>
            <div>
              <img class="shared-photo-trending" src="https://www.fillmurray.com/68/68" alt="twitterpic" />
            </div>
          </div>
          <div class="topics-list-wrapper">
            <div>
              <p class="show-more">Show more</p>
            </div>
          </div>
        </div>
        
        <div>
          <div class="trending-topics">
            <div class="trending-name">Who to follow</div>
              <div class="topics-list-wrapper">
                <div><img class="follow-avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />                       </div>
                <div>
                  <p class="profile-name">Podcasts on Amazon</p>
                  <p class="profile-location">@PlayMorePods</p>
                </div>
                <div><button class="follow-button">Follow</button></div>
              </div>
            <div class="topics-list-wrapper">
                <div>
                   <img class="follow-avatar" src="https://www.fillmurray.com/48/48" alt="twitterpic" />                           </div>
                <div>
                  <p class="profile-name">Alexandria Ocasio-Cortez<span class="blue-check"><i class="bi bi-patch-check-fill"></i></span></p>
                  <p class="profile-location">@AOC</p>
                </div>
                  <div><button class="follow-button">Follow</button></div>
              </div>
            <div class="topics-list-wrapper">
                <div>
                  <p class="show-more">Show more</p>
                </div>
            </div>
             </div>
                <div class="terms-list">
                  <a>Terms of Service</a>
                  <a>Privacy Policy </a>
                  <a>Cookie Policy</a>
                  <a>Accessibility</a>
                  <a>Ads info</a>
                  <a>More<i class="bi bi-three-dots"></i></a>
                  <div>ยฉ 2022 Twitter, Inc.</div>
                </div>
           
           </div>
        </aside>
    </div>
</body>
</html>
 

4. By Aman Gupta

Made by Aman Gupta. Twitter Homepage Clone. Source

css twitter clone by aman gupta
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(1, 792px);
}

.cont-1 {
  width: 100%;
  background: black;
  color: aliceblue;
}

.cont-2 {
  width: 100%;
  background: #15181c;
  color: aliceblue;
  display: grid;
  grid-template-rows: 230px 550px;
  grid-gap: 10px;
  border: 0.5px solid #15181c;
}

.header {
  width: 100%;
  height: 4rem;
  border: 0.5px solid #15181c;
  background: black;
  display: flex;
}
#star-icon {
  fill: rgb(29, 161, 242);
  padding-top: 1rem;
  margin-left: 5rem;
  cursor: pointer;
}

.profile {
  width: 100%;
  height: 10.5rem;
  border: 0.5px solid #15181c;
  background: black;
  display: flex;
  gap: 1rem;
}

.post {
  width: 100%;
  border: 0.5px solid #15181c;
  background: black;
}

.cont-3 {
  width: 100%;
  background: black;
  color: aliceblue;
}

#style-home {
  width: 80%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-top: 1rem;
  padding-left: 2rem;
  cursor: pointer;
}
.user-place {
  width: 8%;
  margin-left: 1rem;
  margin-top: 8px;
}
#user-profile {
  width: 100%;

  border-radius: 50%;
  cursor: pointer;
}
.write-post {
  width: 80%;
  margin-top: 5px;
  /* display: grid;
  grid-template-columns: 200px; */
  /* background: red; */
}

#msg-box {
  width: 100%;
  height: 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: rgb(217, 217, 217);
  background: black;
  border: none;
  outline: none;
}
.reply {
  margin-top: 1rem;
  display: flex;
  gap: 5px;
}

#gloab {
  fill: rgb(29, 161, 242);
  cursor: pointer;
}

#text-msg {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgb(29, 161, 242);
  line-height: normal;
  cursor: pointer;
}
.low-cnt {
  width: 100%;
  display: grid;
  grid-template-columns: 200px 400px;
}
.media {
  width: 100%;
  margin-top: 25px;
  display: grid;

  grid-template-columns: repeat(5, 40px);
  cursor: pointer;
}
/* background: white; */
/* color: white; */
/* fill: rgb(29, 161, 242); */

#icon-color {
  fill: rgb(29, 161, 242);
}

.line {
  margin-top: 12px;
  width: 100%;
  height: 1px;
  background: #15181c;
}
.tweet-btn {
  width: 19%;
  margin-top: 10px;
  margin-left: 15rem;
  height: 2.5rem;
  text-align: center;
  padding: 10px;
  background: rgb(29, 161, 242);
  border-radius: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.post-1 {
  width: 100%;

  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: 470px;
  border: 2px solid #202327;
}

#user-img {
  width: 55%;
  border-radius: 50%;
  margin-left: 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
}

.post-info {
  /* border: 2px solid white; */
  margin-top: 1rem;
}
.user-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: rgb(217, 217, 217);
  cursor: pointer;
}
span {
  font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgb(110, 118, 125);
}
.post-img {
  width: 95%;
  margin-top: 1rem;
  cursor: pointer;
}
#post {
  width: 100%;
  border: 2px solid rgb(110, 118, 125);
  border-radius: 1rem;
}
.post-msg {
  width: 90%;
  margin-top: 5px;
}
#content-msg {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgb(217, 217, 217);
}

#tag {
  color: rgb(29, 161, 242);
  cursor: pointer;
}
.reaction {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
#react {
  fill: rgb(110, 118, 125);
  display: flex;
  gap: 1rem;
}

#react-1 {
  fill: rgb(110, 118, 125);
  display: flex;
  gap: 1rem;
}
#react-2 {
  fill: rgb(110, 118, 125);
  display: flex;
  gap: 1rem;
}

#react:hover {
  fill: rgb(35, 158, 234);
  cursor: pointer;
}

#react-1:hover {
  fill: rgb(23, 191, 99);
  cursor: pointer;
}

#react-2:hover {
  fill: rgb(224, 36, 94);

  cursor: pointer;
}

#num {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(110, 118, 125);
}

#official {
  padding-top: 3px;
  fill: white;
}

/* ----------------Container - 1 ------------------- */

.functions {
  width: 80%;
  /* border: 2px solid white; */
  margin: 0 auto;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: repeat(10, 50px);
  grid-gap: 1rem;
}

.fun {
  width: 90%;
  margin-left: 7rem;
  /* border: 2px solid white; */
  fill: white;
  display: flex;
  gap: 10px;
  color: rgb(217, 217, 217);
  cursor: pointer;
}

.data {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgb(29, 161, 242);
  padding: 5px;
}

#icon-new {
  fill: rgb(29, 161, 242);
}
#new-color {
  color: rgb(217, 217, 217);
  fill: rgb(217, 217, 217);
}

.col-btn {
  width: 100%;
  background: rgb(29, 161, 242);
  text-align: center;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  border-radius: 2rem;
}
.twitter-logo {
  width: 80%;
  /* border: 2px solid white; */
  margin: 0 auto;
  margin-top: 1rem;
  padding-left: 15px;
}
.logo-t {
  width: 50%;
  /* border: 2px solid white; */
  margin: 0 auto;
  padding-left: 10px;
  cursor: pointer;
}
.search {
  width: 75%;
  height: 2.8rem;
  margin: 0 auto;
  margin-left: 2rem;
  margin-top: 1rem;
  background: #202327;
  display: flex;
  gap: 10px;
  border-radius: 3rem;
}
#t-icon {
  fill: rgb(255, 255, 255);
}
#search-log {
  fill: #474d52;
}
.search-icon {
  width: 10%;
  margin-top: 8px;
  padding: 5px;
  margin-left: 1rem;
}

#search-box {
  width: 75%;
  outline: none;
  background: none;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  color: rgb(217, 217, 217);
}

.trending {
  width: 75%;
  margin-top: 1rem;
  /* border: 2px solid white; */
  margin-left: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 100px 70px 70px 70px 50px;
  gap: 1.5px;
  background: rgb(110, 118, 125);
  border-radius: 20px 20px 20px 20px;
}

#item {
  width: 100%;
  margin: 0 auto;
  /* border: 2px solid white;
  */
  /* background: white; */

  background: #202327;
}
.tr-1 {
  border-radius: 10px 10px 0px 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: rgb(217, 217, 217);
  padding: 1rem;
  /* border: 1px solid rgb(110, 118, 125); */
}
.tr-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* border: 1px solid rgb(110, 118, 125); */
  cursor: pointer;
}

.live-img {
  width: 80%;
  margin-left: 3rem;
}
#img-new-live {
  width: 75%;
  height: 4.5rem;
  margin-top: 12px;
  border-radius: 1rem;
}
.trn-topic {
  width: 100%;
  margin-top: 15px;
  margin-left: 1rem;
}
#covid-msg {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(110, 118, 125);
}
#topic-trend {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(217, 217, 217);
}
.tr-3 {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-gap: 2.8rem;
  cursor: pointer;
}
.trending-topic-1 {
  width: 80%;
  padding: 10px;
  margin-left: 7px;
}
#trnd-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(110, 118, 125);
}
#trnd-tag {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(217, 217, 217);
}
#trnd-no {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(110, 118, 125);
}
#more-tip {
  fill: rgb(110, 118, 125);
  margin-top: 10px;
}
.tr-4 {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-gap: 2.2rem;
  cursor: pointer;
}
.tr-6 {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-gap: 2.2rem;
  cursor: pointer;
}

.tr-7 {
  border-radius: 0px 0px 10px 10px;
  cursor: pointer;
}
.show-more {
  width: 80%;
  margin-left: 1rem;
  margin-top: 12px;
  color: rgb(29, 161, 242);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.who-to-follow {
  width: 75%;
  margin-top: 1rem;
  /* border: 2px solid white; */
  margin-left: 2rem;
  background: rgb(110, 118, 125);
  border-radius: 20px 20px 20px 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 55px 70px 70px 50px;
  grid-gap: 1.5px;
}

#who-i-follow {
  width: 100%;
  /* border: 1px solid white; */
  background: #15181c;
}

.follow-1 {
  border-radius: 10px 10px 0px 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: rgb(217, 217, 217);
  padding: 1rem;
}
.follow-2 {
  display: grid;
  grid-template-columns: 80px 150px 100px;
}
.user-profile {
  width: 50%;
}
#follow-profile {
  width: 65%;
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 10px;
}
.name-of-user {
  margin-top: 10px;
}
#company {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  color: rgb(217, 217, 217);
  font-size: 15px;
  font-weight: 700;
}
.follow-btn-new {
  width: 100%;
  height: 2.3rem;
  margin-top: 16px;
  text-align: center;
  padding: 5px;
  border-radius: 2rem;
  border: 2px solid rgb(29, 161, 242);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(29, 161, 242);
  cursor: pointer;
}
.follow-4 {
  border-radius: 0px 0px 10px 10px;
  cursor: pointer;
}
</style>
</head>
<body>
    <div class="container">
        <div class="cont-1">
            <div class="twitter-logo">
                <div class="logo-t">
                    <svg viewBox="0 0 24 24" id="t-icon" width="40" height="40" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-16y2uox r-1q142lx r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
                </div>
            </div>
            <div class="functions">
                <div class="fun">
                    <svg viewBox="0 0 24 24" id="icon-new" width="30" height="30" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M22.58 7.35L12.475 1.897c-.297-.16-.654-.16-.95 0L1.425 7.35c-.486.264-.667.87-.405 1.356.18.335.525.525.88.525.16 0 .324-.038.475-.12l.734-.396 1.59 11.25c.216 1.214 1.31 2.062 2.66 2.062h9.282c1.35 0 2.444-.848 2.662-2.088l1.588-11.225.737.398c.485.263 1.092.082 1.354-.404.263-.486.08-1.093-.404-1.355zM12 15.435c-1.795 0-3.25-1.455-3.25-3.25s1.455-3.25 3.25-3.25 3.25 1.455 3.25 3.25-1.455 3.25-3.25 3.25z"></path></g></svg>
                    <div id="icon-new" class="data">Home</div>
                </div>
                <div class="fun">
                     <svg id="new-color" viewBox="0 0 24 24" width="30" height="30" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21 7.337h-3.93l.372-4.272c.036-.412-.27-.775-.682-.812-.417-.03-.776.27-.812.683l-.383 4.4h-6.32l.37-4.27c.037-.413-.27-.776-.68-.813-.42-.03-.777.27-.813.683l-.382 4.4H3.782c-.414 0-.75.337-.75.75s.336.75.75.75H7.61l-.55 6.327H3c-.414 0-.75.336-.75.75s.336.75.75.75h3.93l-.372 4.272c-.036.412.27.775.682.812l.066.003c.385 0 .712-.295.746-.686l.383-4.4h6.32l-.37 4.27c-.036.413.27.776.682.813l.066.003c.385 0 .712-.295.746-.686l.382-4.4h3.957c.413 0 .75-.337.75-.75s-.337-.75-.75-.75H16.39l.55-6.327H21c.414 0 .75-.336.75-.75s-.336-.75-.75-.75zm-6.115 7.826h-6.32l.55-6.326h6.32l-.55 6.326z"></path></g></svg>
                     <div id="new-color" class="data">Explore</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24" width="30" height="30" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.532-.812-4.782-2.347-6.335C15.872 2.71 14.01 1.94 12.005 1.93h-.013c-2.004.01-3.866.78-5.242 2.174-1.534 1.553-2.368 3.802-2.346 6.334.037 4.33-2.02 5.967-2.102 6.03-.26.193-.366.53-.265.838.102.308.39.515.712.515h4.92c.102 2.31 1.997 4.16 4.33 4.16s4.226-1.85 4.327-4.16h4.922c.322 0 .61-.206.71-.514.103-.307-.003-.645-.263-.838zM12 20.478c-1.505 0-2.73-1.177-2.828-2.658h5.656c-.1 1.48-1.323 2.66-2.828 2.66zM4.38 16.32c.74-1.132 1.548-3.028 1.524-5.896-.018-2.16.644-3.982 1.913-5.267C8.91 4.05 10.397 3.437 12 3.43c1.603.008 3.087.62 4.18 1.728 1.27 1.285 1.933 3.106 1.915 5.267-.024 2.868.785 4.765 1.525 5.896H4.38z"></path></g></svg>
                    <div id="new-color" class="data">Notifications</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24" width="30" height="30" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M19.25 3.018H4.75C3.233 3.018 2 4.252 2 5.77v12.495c0 1.518 1.233 2.753 2.75 2.753h14.5c1.517 0 2.75-1.235 2.75-2.753V5.77c0-1.518-1.233-2.752-2.75-2.752zm-14.5 1.5h14.5c.69 0 1.25.56 1.25 1.25v.714l-8.05 5.367c-.273.18-.626.182-.9-.002L3.5 6.482v-.714c0-.69.56-1.25 1.25-1.25zm14.5 14.998H4.75c-.69 0-1.25-.56-1.25-1.25V8.24l7.24 4.83c.383.256.822.384 1.26.384.44 0 .877-.128 1.26-.383l7.24-4.83v10.022c0 .69-.56 1.25-1.25 1.25z"></path></g></svg>
                    <div id="new-color" class="data">Messages</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24" width="30" height="30" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M19.9 23.5c-.2 0-.3 0-.4-.1L12 17.9l-7.5 5.4c-.2.2-.5.2-.8.1-.2-.1-.4-.4-.4-.7V5.6c0-1.2 1-2.2 2.2-2.2h12.8c1.2 0 2.2 1 2.2 2.2v17.1c0 .3-.2.5-.4.7 0 .1-.1.1-.2.1z"></path></g></svg>
                    <div id="new-color" class="data">Bookmark</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24"  width="30" height="30" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M19.75 22H4.25C3.01 22 2 20.99 2 19.75V4.25C2 3.01 3.01 2 4.25 2h15.5C20.99 2 22 3.01 22 4.25v15.5c0 1.24-1.01 2.25-2.25 2.25zM4.25 3.5c-.414 0-.75.337-.75.75v15.5c0 .413.336.75.75.75h15.5c.414 0 .75-.337.75-.75V4.25c0-.413-.336-.75-.75-.75H4.25z"></path><path d="M17 8.64H7c-.414 0-.75-.337-.75-.75s.336-.75.75-.75h10c.414 0 .75.335.75.75s-.336.75-.75.75zm0 4.11H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75zm-5 4.11H7c-.414 0-.75-.335-.75-.75s.336-.75.75-.75h5c.414 0 .75.337.75.75s-.336.75-.75.75z"></path></g></svg>
                    <div id="new-color" class="data">Lists</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24" width="30" height="30" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M12.225 12.165c-1.356 0-2.872-.15-3.84-1.256-.814-.93-1.077-2.368-.805-4.392.38-2.826 2.116-4.513 4.646-4.513s4.267 1.687 4.646 4.513c.272 2.024.008 3.46-.806 4.392-.97 1.106-2.485 1.255-3.84 1.255zm5.849 9.85H6.376c-.663 0-1.25-.28-1.65-.786-.422-.534-.576-1.27-.41-1.968.834-3.53 4.086-5.997 7.908-5.997s7.074 2.466 7.91 5.997c.164.698.01 1.434-.412 1.967-.4.505-.985.785-1.648.785z"></path></g></svg>
                    <div id="new-color" class="data">Profile</div>
                </div>
                <div class="fun">
                    <svg viewBox="0 0 24 24" width="30" height="30" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><circle cx="17" cy="12" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="7" cy="12" r="1.5"></circle><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></g></svg>
                    <div id="new-color" class="data">More</div>
                </div>
                <div class="fun">
                   <div class="col-btn">
                       Tweet
                   </div>
                </div>
                
        </div>
        </div>
        <div class="cont-2">
            <div class="user">
                <div class="header">
                    <div id="style-home">Home</div>
                    <div id="star-icon">
                        <svg viewBox="0 0 24 24" width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M22.772 10.506l-5.618-2.192-2.16-6.5c-.102-.307-.39-.514-.712-.514s-.61.207-.712.513l-2.16 6.5-5.62 2.192c-.287.112-.477.39-.477.7s.19.585.478.698l5.62 2.192 2.16 6.5c.102.306.39.513.712.513s.61-.207.712-.513l2.16-6.5 5.62-2.192c.287-.112.477-.39.477-.7s-.19-.585-.478-.697zm-6.49 2.32c-.208.08-.37.25-.44.46l-1.56 4.695-1.56-4.693c-.07-.21-.23-.38-.438-.462l-4.155-1.62 4.154-1.622c.208-.08.37-.25.44-.462l1.56-4.693 1.56 4.694c.07.212.23.382.438.463l4.155 1.62-4.155 1.622zM6.663 3.812h-1.88V2.05c0-.414-.337-.75-.75-.75s-.75.336-.75.75v1.762H1.5c-.414 0-.75.336-.75.75s.336.75.75.75h1.782v1.762c0 .414.336.75.75.75s.75-.336.75-.75V5.312h1.88c.415 0 .75-.336.75-.75s-.335-.75-.75-.75zm2.535 15.622h-1.1v-1.016c0-.414-.335-.75-.75-.75s-.75.336-.75.75v1.016H5.57c-.414 0-.75.336-.75.75s.336.75.75.75H6.6v1.016c0 .414.335.75.75.75s.75-.336.75-.75v-1.016h1.098c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"></path></g></svg>
                    </div>
                </div>
                <div class="profile">
                    <div class="user-place">
                        <img id="user-profile" src="https://pbs.twimg.com/profile_images/1364491704817098753/V22-Luf7_400x400.jpg"/>
                    </div>
                    
                    <div class="write-post">
                        <input id="msg-box" type="text" placeholder="What's happening?"/>
                        <div class="reply">
                            <div id="gloab">
                                <svg viewBox="0 0 24 24" width="20" height="20" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-1sp7lne r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M12 1.5C6.2 1.5 1.5 6.2 1.5 12S6.2 22.5 12 22.5 22.5 17.8 22.5 12 17.8 1.5 12 1.5zM9.047 5.9c-.878.484-1.22.574-1.486.858-.263.284-.663 1.597-.84 1.712-.177.115-1.462.154-1.462.154s2.148 1.674 2.853 1.832c.706.158 2.43-.21 2.77-.142.342.07 2.116 1.67 2.324 2.074.208.404.166 1.748-.038 1.944-.204.196-1.183 1.09-1.393 1.39-.21.3-1.894 4.078-2.094 4.08-.2 0-.62-.564-.73-.848-.11-.284-.427-4.012-.59-4.263-.163-.25-1.126-.82-1.276-1.026-.15-.207-.552-1.387-.527-1.617.024-.23.492-1.007.374-1.214-.117-.207-2.207-1.033-2.61-1.18-.403-.145-.983-.332-.983-.332 1.13-3.652 4.515-6.318 8.52-6.38 0 0 .125-.018.186.14.11.286.256 1.078.092 1.345-.143.23-2.21.99-3.088 1.474zm11.144 8.24c-.21-.383-1.222-2.35-1.593-2.684-.23-.208-2.2-.912-2.55-1.09-.352-.177-1.258-.997-1.267-1.213-.01-.216 1.115-1.204 1.15-1.524.056-.49-1.882-1.835-1.897-2.054-.015-.22.147-.66.31-.81.403-.36 3.19.04 3.556.36 2 1.757 3.168 4.126 3.168 6.873 0 .776-.18 1.912-.282 2.18-.08.21-.443.232-.595-.04z"></path></g></svg>
                            </div>
                            <h2 id="text-msg">Everyone can reply</h2>
                        </div>
                        <div class="line">
                        </div>
                        
                        <div class="low-cnt">
                                <div class="media">
                                         <div id="icon-color" class="media-1">
                                                <svg viewBox="0 0 24 24"  width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M19.75 2H4.25C3.01 2 2 3.01 2 4.25v15.5C2 20.99 3.01 22 4.25 22h15.5c1.24 0 2.25-1.01 2.25-2.25V4.25C22 3.01 20.99 2 19.75 2zM4.25 3.5h15.5c.413 0 .75.337.75.75v9.676l-3.858-3.858c-.14-.14-.33-.22-.53-.22h-.003c-.2 0-.393.08-.532.224l-4.317 4.384-1.813-1.806c-.14-.14-.33-.22-.53-.22-.193-.03-.395.08-.535.227L3.5 17.642V4.25c0-.413.337-.75.75-.75zm-.744 16.28l5.418-5.534 6.282 6.254H4.25c-.402 0-.727-.322-.744-.72zm16.244.72h-2.42l-5.007-4.987 3.792-3.85 4.385 4.384v3.703c0 .413-.337.75-.75.75z"></path><circle cx="8.868" cy="8.309" r="1.542"></circle></g></svg>
                                         </div>
                                        <div id="icon-color" class="media-2">
                                            <svg viewBox="0 0 24 24" width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M19 10.5V8.8h-4.4v6.4h1.7v-2h2v-1.7h-2v-1H19zm-7.3-1.7h1.7v6.4h-1.7V8.8zm-3.6 1.6c.4 0 .9.2 1.2.5l1.2-1C9.9 9.2 9 8.8 8.1 8.8c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c1 0 1.8-.4 2.4-1.1v-2.5H7.7v1.2h1.2v.6c-.2.1-.5.2-.8.2-.9 0-1.6-.7-1.6-1.6 0-.8.7-1.6 1.6-1.6z"></path><path d="M20.5 2.02h-17c-1.24 0-2.25 1.007-2.25 2.247v15.507c0 1.238 1.01 2.246 2.25 2.246h17c1.24 0 2.25-1.008 2.25-2.246V4.267c0-1.24-1.01-2.247-2.25-2.247zm.75 17.754c0 .41-.336.746-.75.746h-17c-.414 0-.75-.336-.75-.746V4.267c0-.412.336-.747.75-.747h17c.414 0 .75.335.75.747v15.507z"></path></g></svg>
                                        </div>
                                        <div id="icon-color">
                                                <svg viewBox="0 0 24 24" width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M20.222 9.16h-1.334c.015-.09.028-.182.028-.277V6.57c0-.98-.797-1.777-1.778-1.777H3.5V3.358c0-.414-.336-.75-.75-.75s-.75.336-.75.75V20.83c0 .415.336.75.75.75s.75-.335.75-.75v-1.434h10.556c.98 0 1.778-.797 1.778-1.777v-2.313c0-.095-.014-.187-.028-.278h4.417c.98 0 1.778-.798 1.778-1.778v-2.31c0-.983-.797-1.78-1.778-1.78zM17.14 6.293c.152 0 .277.124.277.277v2.31c0 .154-.125.28-.278.28H3.5V6.29h13.64zm-2.807 9.014v2.312c0 .153-.125.277-.278.277H3.5v-2.868h10.556c.153 0 .277.126.277.28zM20.5 13.25c0 .153-.125.277-.278.277H3.5V10.66h16.722c.153 0 .278.124.278.277v2.313z"></path></g></svg>
                                        </div>
                                        <div id="icon-color">
                                                <svg viewBox="0 0 24 24" width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path><path d="M12 17.115c-1.892 0-3.633-.95-4.656-2.544-.224-.348-.123-.81.226-1.035.348-.226.812-.124 1.036.226.747 1.162 2.016 1.855 3.395 1.855s2.648-.693 3.396-1.854c.224-.35.688-.45 1.036-.225.35.224.45.688.226 1.036-1.025 1.594-2.766 2.545-4.658 2.545z"></path><circle cx="14.738" cy="9.458" r="1.478"></circle><circle cx="9.262" cy="9.458" r="1.478"></circle></g></svg>
                                        </div>
                                        <div id="icon-color">
                                                <svg viewBox="0 0 24 24" width="25" height="25" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M-37.9 18c-.1-.1-.1-.1-.1-.2.1 0 .1.1.1.2z"></path><path d="M-37.9 18c-.1-.1-.1-.1-.1-.2.1 0 .1.1.1.2zM18 2.2h-1.3v-.3c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v.3H7.7v-.3c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v.3H4.8c-1.4 0-2.5 1.1-2.5 2.5v13.1c0 1.4 1.1 2.5 2.5 2.5h2.9c.4 0 .8-.3.8-.8 0-.4-.3-.8-.8-.8H4.8c-.6 0-1-.5-1-1V7.9c0-.3.4-.7 1-.7H18c.6 0 1 .4 1 .7v1.8c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-5c-.1-1.4-1.2-2.5-2.6-2.5zm1 3.7c-.3-.1-.7-.2-1-.2H4.8c-.4 0-.7.1-1 .2V4.7c0-.6.5-1 1-1h1.3v.5c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-.5h7.5v.5c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-.5H18c.6 0 1 .5 1 1v1.2z"></path><path d="M15.5 10.4c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2 3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2zm0 11c-2.6 0-4.7-2.1-4.7-4.7s2.1-4.7 4.7-4.7 4.7 2.1 4.7 4.7c0 2.5-2.1 4.7-4.7 4.7z"></path><path d="M18.9 18.7c-.1.2-.4.4-.6.4-.1 0-.3 0-.4-.1l-3.1-2v-3c0-.4.3-.8.8-.8.4 0 .8.3.8.8v2.2l2.4 1.5c.2.2.3.6.1 1z"></path></g></svg>
                                        </div>
                                  </div>

                                <div class="tweet-btn">
                                        Tweet
                                </div>
                         </div>

                    </div>
                </div>
            </div>
            <div class="post">
               <div class="post-1">
                    <div class="user-image">
                        <img id="user-img" src="https://pbs.twimg.com/profile_images/1364491704817098753/V22-Luf7_400x400.jpg"/>
                    </div>
                    <div class="post-info">
                       <div class="user-name">
                           Elon Musk <span id="official"><svg id="official" viewBox="0 0 24 24" width="20" height="20" aria-label="Verified account" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-1xvli5t r-9cviqr r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"></path></g></svg></span>
                            <span>@elonmusk</span> <span>20m</span>
                       </div>
                       <div class="post-msg">
                           <p id="content-msg">
                            This morning Starship SN15โ€™s nosecone is heading into the high bay. It appears that <span id="tag" >@SpaceX</span> is not wasting any time in preparing SN15 to roll to the launch site ASAP.๐Ÿ”ฅ ๐Ÿš€ ๐Ÿ”ฅ

                           </p>
                       </div>
                        <div class="post-img">
                            <img id="post" src="https://www.spaceflightinsider.com/wp-content/uploads/2021/03/E76E27C6-F86E-40B9-B7E7-9EC98777ADF4.jpeg" />
                        </div>

                        <div class="reaction">
                            <div  id="react">
                                <svg viewBox="0 0 24 24"  width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
                                <div id="num">1.2k</div>
                            </div>
                            <div id="react-1">
                                <svg viewBox="0 0 24 24"  width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>
                                <div id="num">15k</div>
                            </div>
                            <div id="react-2">
                                <svg viewBox="0 0 24 24" width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
                                <div id="num">2m</div>
                            </div>
                            <div id="react">
                                <svg viewBox="0 0 24 24" width="20" height="20"class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg>
                                <div  id="num">5k</div>
                            </div>
                        </div>
                    </div>
               </div>
            </div>
        </div>
         <div class="cont-3">
             <div class="search">
                <div class="search-icon">
                    <svg viewBox="0 0 24 24" id="search-log" width="22" height="22" class="r-9ilb82 r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
                </div>
                <input id="search-box" type="text" placeholder="Search Twitter" />
             </div>

             <div class="trending">
                 <div id="item" class="tr-1">
                     What's happening
                 </div>
                 <div id="item" class="tr-2">
                     <div class="trn-topic">
                         <p id="covid-msg">COVID-19 - LIVE</p>
                         <h3 id="topic-trend">COVID-19 in India</h3>
                     </div>
                     <div class="live-img">
                         <img id="img-new-live" src="https://pbs.twimg.com/semantic_core_img/1255575536824233984/CiLy4der?format=jpg&name=240x240" />
                     </div>
                 </div>
                 <div id="item" class="tr-3">
                     <div class="trending-topic-1">
                         <p id="trnd-text">Trending in India </p>
                         <h4 id="trnd-tag">#SpaceX</h4>
                         <h5 id="trnd-no">7,424 Tweets</h5>
                     </div>
                     <div class="more">
                        <svg id="more-tip" viewBox="0 0 24 24" width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></g></svg>
                     </div>
                 </div>
                 <div id="item" class="tr-4">
                     <div class="trending-topic-1">
                        <p id="trnd-text">Trending in India </p>
                        <h4 id="trnd-tag">#StartshipLaunch</h4>
                        <h5 id="trnd-no">6,324 Tweets</h5>
                     </div>
                     <div class="more">
                        <svg id="more-tip" viewBox="0 0 24 24" width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></g></svg>
                     </div>
                  </div>
                
                 <div id="item" class="tr-6">
                    <div class="trending-topic-1">
                        <p id="trnd-text">Trending in India </p>
                        <h4 id="trnd-tag">#TeslaIndia</h4>
                        <h5 id="trnd-no">5,424 Tweets</h5>
                     </div>
                     <div class="more">
                        <svg id="more-tip" viewBox="0 0 24 24" width="20" height="20" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></g></svg>
                     </div> 
                 </div>
                 <div id="item" class="tr-7">
                     <div class="show-more">
                        Show more
                     </div>
                 </div>
             </div>

             <div class="who-to-follow">
                 <div id="who-i-follow" class="follow-1">Who to follow</div>
                 <div  id="who-i-follow" class="follow-2">
                     <div class="user-pro">
                         <img id="follow-profile" src="https://pbs.twimg.com/profile_images/669103856106668033/UF3cgUk4_400x400.jpg" />
                     </div>
                     <div class="name-of-user">
                         <p id="company">Jeff Bezos</p>
                         <span> <p>@JeffBezos</p></span>
                        
                     </div>
                      <div class="follow-btn-new">
                         Follow
                      </div>
                 </div>
                 <div id="who-i-follow" class="follow-2">
                    <div class="user-pro">
                        <img id="follow-profile" src="https://pbs.twimg.com/profile_images/1279010677600866304/PWmw-p1S_400x400.jpg" />
                    </div>
                    <div class="name-of-user">
                        <p id="company">Tesla</p>
                        <span> <p>@Tesla</p></span>
                       
                    </div>
                     <div class="follow-btn-new">
                        Follow
                     </div>
                 </div>
                 <div id="who-i-follow" class="follow-4">
                     <div class="show-more">
                         Show more
                     </div>
                </div>
             </div>

        </div>
    </div>
</body>
</html>

5. By Musicangora

Made by Musicangora. Twitter header and Footer Clone. Source

css twitter clone by musicangora
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
  
<style>
body {
  margin: 0 auto;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 16px;
  color: #14171A;
  background-color: #ffffff;
}

a {
  text-decoration: none;
  display: inline-block;
  color: #1DA1F2;
}

a:visited { 
  color: #1DA1F2;
}

i {
  font-size: 24px;
  padding: 0 16px;
}

.container {
  width: 100%;
  height: 60px;
  padding: 0 ;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  box-shadow: 0 1px 0 0 #E1E8ED; 
}

.navbar {
  width: 100%;
  height: 60px;
  padding: 0 ;
  margin: 0 auto;
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 0 0 #E1E8ED; 
}

.navbar a {
  color: #657786;
  padding-top: 8px;
}

.navbar a:hover {
  color: #1DA1F2;
}

.tweet {
  display: block;
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: #1DA1F2;
  cursor: pointer;
  width: 72px;
  height: 72px;
  border-radius: 50% 50%;
  box-shadow: 0 4px 10px rgba(20, 23, 26, 0.3); 
}

.tweet a {
  color: #fff;
  position: relative;
}

.tweet a i {
  position: absolute;
  top: 12px;
  right: 0;
  left: 8px;
  bottom: 0;
  margin: auto;
}

.header-left i {
  font-size: 32px;
  padding: 0 8px;
}

.circle {
  background: #1DA1F2;
  width: 8px;
  height: 8px;
  border-radius: 50% 50%;
  position: relative;
  left: 40px;
  bottom: 36px;
  opacity: 0;
}

.navbar a:hover .circle {
  opacity: 1;
}
</style>
</head>
<body>
  <!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twowowowowowoter</title>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <a href="#"> <i class="fas fa-user-circle"></i> </a>
        </div>
        <div class="headder-logo">
          <a href="#"> <i class="fab fa-twitter"></i> </a>
        </div>
        <div class="header-right">
          <a href="#"> <i class="fas fa-magic"></i> </a>
        </div>
      </div>
    </header>
    
    
    <main>
      <div class="tweet">
        <a href="#"> <i class="fas fa-pen-fancy"></i> </a>
      </div>
    </main>
    
    
    <div class="navbar">
      <div class="nav-home">
        <a href="#"> <i class="fas fa-home"></i>  <div class="circle"></div> </a>
      </div>
      <div class="nav-serch">
        <a href="#"> <i class="fas fa-search"></i> <div class="circle"></div></a>
      </div>
      <div class="nav-noti">
        <a href="#"> <i class="far fa-bell"></i> <div class="circle"></div></a>
      </div>
      <div class="nav-mail">
        <a href="#"> <i class="far fa-envelope"></i> <div class="circle"></div></a>
      </div>
</body>
</html>

6. By Gerald Cahya Prambudi

Made by Gerald Cahya Prambudi. Another Twitter Clone using Tailwind CSS. Source

css twitter clone by gerald cahya prambudi
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.4/tailwind.min.css'>
  
<style>
li {
  padding: 1rem 0;
}

textarea {
  text-indent: 10px;
  padding-top: 10px;
  width:100%;
}
</style>
</head>
<body>
  <div class="flex mb-4">
  <div class="w-1/3 h-auto h-12 px-12 py-4">
    <ul>
      <li class="font-bold">Twitter</li>
      <li class="font-bold text-blue-600">Home</li>
      <li>Explore</li>
      <li>Notifications</li>
      <li>Messages</li>
      <li>Bookmarks</li>
      <li>Lists</li>
      <li>Profile</li>
      <li>More</li>
      <li>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
          Tweet
        </button>
      </li>
      <li>Username @gerald</li>
    </ul>
  </div>
  <div class="w-1/3 h-auto h-12 px-12 py-4 font-bold">
    <ul>
      <li>Home</li>
      <li>
        <textarea class="resize-y border rounded focus:outline-none focus:shadow-outline border-blue-500 border-opacity-100 text-left" placeholder="What's happening?"></textarea>
      </li>
      <li>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full float-right">
          Tweet
        </button><br />
      </li>
      <li>
        <div class="text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600                  xl:text-gray-900 ...">
          <h4>Gerald P</h4>

        </div>
        <p class="text-gray-700">Design twitter with tailwind clone</p>
        <div class="flex mb-4">
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Comment</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">RT</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Like</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Share</div>
        </div>
      </li>

      <li>
        <div class="text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600                  xl:text-gray-900 ...">
          <h4>Laravel Official</h4>

        </div>
        <p class="text-gray-700">New laravel 7 Taylow Otwell</p>
        <div class="flex mb-4">
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Comment</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">RT</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Like</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Share</div>
        </div>
      </li>

      <li>
        <div class="text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600                  xl:text-gray-900 ...">
          <h4>Node Js</h4>

        </div>
        <p class="text-gray-700">Node js New Version</p>
        <div class="flex mb-4">
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Comment</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">RT</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Like</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Share</div>
        </div>
      </li>

      <li>
        <div class="text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600                  xl:text-gray-900 ...">
          <h4>Badminton Official Indonesia</h4>

        </div>
        <p class="text-gray-700">Kevin Sanjaya Mendapatkan Emas</p>
        <div class="flex mb-4">
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Comment</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">RT</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Like</div>
          <div class="w-1/4  h-12 font-sans text-sm text-gray-500">Share</div>
        </div>
      </li>

    </ul>

  </div>
  <div class="w-1/3 h-auto h-12 px-12 py-4 font-bold">
    <ul>
      <form class="w-full max-w-sm">
        <div class="flex items-center border-b border-teal-500 py-2">
          <input class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Twitter" aria-label="Full name">

        </div>
      </form>
      <li>
        <h1>Trends For you</h1>
      </li>
      <li>
        <p class="font-sans text-sm text-gray-500">Entertaiment . Trending</p>
        <p class="font-sans text-sm text-gray-800">17 Agustus</p>
        <p class="font-sans text-sm text-gray-500">12k Tweets</p>
      </li>
      <li>
        <p class="font-sans text-sm text-gray-500">Games . Trending</p>
        <p class="font-sans text-sm text-gray-800">Dota</p>
        <p class="font-sans text-sm text-gray-500">9k Tweets</p>
      </li>
      <li>
        <p class="font-sans text-sm text-gray-500">Gadgets . Trending</p>
        <p class="font-sans text-sm text-gray-800">New Iphone</p>
        <p class="font-sans text-sm text-gray-500">7k Tweets</p>
      </li>
      <li>
        <p class="font-sans text-sm text-gray-500">Laptop . Trending</p>
        <p class="font-sans text-sm text-gray-800">New Macbook pro</p>
        <p class="font-sans text-sm text-gray-500">5k Tweets</p>
      </li>
      <li>
        <p class="font-sans text-sm text-gray-500">Sports . Trending</p>
        <p class="font-sans text-sm text-gray-800">Badminton Kevin Hendrawan</p>
        <p class="font-sans text-sm text-gray-500">4k Tweets</p>
      </li>
      <li>
        <p class="font-sans text-sm text-blue-600">Show More</p>
      </li>
    </ul>
  </div>
</div>
</body>
</html>
 

7. By Josh Longanecker

Made by Josh Longanecker. Twitter Home feed clone. Source

css twitter clone by josh longanecker
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
  background: #f0f0f0;
}

.nav form {
  padding: 10px 0 0;
}
.nav form button {
  margin: 0 0 0 15px;
  border-radius: 5px;
  border: none;
}

.user-profile-container {
  padding: 40px 0 15px;
  margin-bottom: 20px;
  background: #fff;
}
.user-profile-container .user-image-container {
  float: left;
  width: 75px;
  margin: 0 15px;
}
.user-profile-container .user-image-container img {
  width: 100%;
  border-radius: 50%;
}
.user-profile-container .user-name-container {
  float: left;
  padding-top: 15px;
}
.user-profile-container .user-details-container {
  clear: both;
  padding: 15px;
}

.top-trends-container {
  background: #fff;
  padding: 15px;
}
.top-trends-container .top-trends {
  list-style: none;
  margin: 0;
  padding: 0;
}

.create-tweet-container {
  background: #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
}
.create-tweet-container form {
  background: #fff;
  border: 1px solid #dfdfdf;
  padding: 15px;
}
.create-tweet-container form input {
  border: none;
  width: 300px;
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed .tweet-container {
  background: #fff;
  border-top: 1px solid #dfdfdf;
  padding: 15px;
  margin-bottom: 15px;
}
.feed .tweet-container .author-image-container {
  float: left;
  margin-right: 15px;
}
.feed .tweet-container .author-image-container img {
  width: 45px;
  border-radius: 50%;
}
.feed .tweet-container .tweet-creator-data-container {
  margin-top: 10px;
}
.feed .tweet-container .tweet-creator-data-container > div {
  float: left;
  margin-right: 15px;
}
.feed .tweet-container .tweet-content {
  clear: both;
  margin: 15px 0 15px 60px;
}
.feed .tweet-container .tweet-publish-data-container {
  margin-left: 60px;
  padding-bottom: 30px;
}
.feed .tweet-container .tweet-publish-data-container > div {
  float: left;
  margin-right: 15px;
}

.follow-container {
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
}
.follow-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.follow-container ul .follow {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  margin-bottom: 15px;
  overflow: hidden;
}
.follow-container ul .follow .account-image {
  float: left;
  margin-right: 15px;
}
.follow-container ul .follow .account-image img {
  border-radius: 50%;
  width: 45px;
}
.follow-container ul .follow .account-information-container {
  float: left;
}
.follow-container ul .follow .follow-button {
  clear: both;
  float: right;
}

.ad-container {
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
}
.ad-container img {
  width: 100%;
}

.support-container {
  background: #fff;
  padding: 15px;
  overflow: hidden;
}
.support-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.support-container ul li {
  float: left;
  margin-right: 15px;
}

.tweet-container {
  position: relative;
}

.tweet-options {
  position: absolute;
  right: 15px;
  top: 15px;
}
</style>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Notifications</a></li>
            <li><a href="#">Messages</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li>
                <form action="">
                    <input type="text"><button type="submit">Search</button>
                </form>
            </li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Tweet</a></li>
        </ul>
    </div>
</div>

<div class="container site-content" style="padding-top: 60px">
    <div class="row">
        <div class="col-md-3 user-content">


            <div class="user-profile-container">
                <div class="user-image-container">
                    <img src="http://via.placeholder.com/100x100" alt="">
                </div>
                <div class="user-name-container">
                    <div class="user-name">Fred</div>
                    <div class="user-handle">@FredFlinstone</div>
                </div>

                <div class="user-details-container">
                    <div class="row text-center">
                        <div class="col-xs-4">
                            <div class="user-details-title">Tweets</div>
                            <div class="user-details-count">2</div>
                        </div>
                        <div class="col-xs-4">
                            <div class="user-details-title">Follows</div>
                            <div class="user-details-count">12</div>
                        </div>
                        <div class="col-xs-4">
                            <div class="user-details-title">Followers</div>
                            <div class="user-details-count">1</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end user profile container-->


            <div class="top-trends-container">
                <h4>currently trending:</h4>
                <ul class="top-trends">
                    <li>
                        <div class="trending-tag"><a href="#">#cats</a></div>
                        <div class="total-tweets">Total: 111111</div>
                    </li>
                </ul>
            </div>
            <!-- end currently trending container -->


        </div>
        <!-- end user info sidebar -->


        <div class="col-md-6 feed">


            <div class="create-tweet-container">
                <form action="">
                    <input type="text">
                    <button class="pull-right" type="submit">tweet</button>
                </form>
            </div>
            <!-- end create tweet container-->

            <ul class="feed">
                <li>
                    <div class="tweet-container">
                        <div class="tweet-options">
<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>                            
                        </div>
                        <div class="author-image-container">
                            <img src="http://via.placeholder.com/60x60" alt="">

                        </div>
                        <div class="tweet-creator-data-container">
                            <div class="author-name">Fred Flinstone</div>
                            <div class="author-handle">@FredFlinstone</div>
                            <div class="tweet-timestamp">37m</div>
                        </div>
                        <div class="tweet-content">
                            <p>Here is a tweet</p>

                        </div>
                        <div class="tweet-publish-data-container">
                            <div class="replies-container">1</div>
                            <div class="retweets-container">3</div>
                            <div class="favorited-container">1</div>
                            <div class="message-author-container"></div>
                        </div>
                    </div>
                </li>
            </ul>


        </div>
        <!--end feed container -->


        <div class="col-md-3 suggested-content">
            <div class="follow-container">
                <h4>follow</h4>
                <ul>
                    <li>
                        <div class="follow">
                            <div class="account-image"><img src="http://via.placeholder.com/60x60" alt=""></div>
                            <div class="account-information-container">
                                <div class="account-name">Fred Flinstone</div>
                                <div class="account-handle">@FredFlinstone</div>
                            </div>
                            <!--end account information container -->
                            <div class="follow-button"><button>follow</button>

                            </div>


                        </div>
                    </li>
                </ul>
            </div>
            <!--end suggested adds -->
            <div class="ad-container">
                <h4>Ad</h4>
                <img src="http://via.placeholder.com/60x60" alt="">
            </div>
            <!--end ad container-->

            <div class="support-container">
                <h4>support</h4>
                <ul>
                    <li><a href="#">link</a></li>
                </ul>
            </div>
            <!--end support-->
        </div>
        <!-- end suggested content-->
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>