JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
  <div class="facebook">
    <div class="profile"></div>
    <div class="cover">
      <img src="https://images.unsplash.com/photo-1539027994943-7d6960acfaad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1c437d8504bbdc6f863f4e58a514ec45&auto=format&fit=crop&w=1950&q=80">
    </div>
    <div class="shared-img">
      <img src="https://images.unsplash.com/photo-1539027994943-7d6960acfaad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1c437d8504bbdc6f863f4e58a514ec45&auto=format&fit=crop&w=1950&q=80">
    </div>
    <div class="shared-link">
      <img src="https://images.unsplash.com/photo-1539027994943-7d6960acfaad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1c437d8504bbdc6f863f4e58a514ec45&auto=format&fit=crop&w=1950&q=80">
    </div>
    <div class="shared-high">
      <img src="https://images.unsplash.com/photo-1539027994943-7d6960acfaad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1c437d8504bbdc6f863f4e58a514ec45&auto=format&fit=crop&w=1950&q=80">
    </div>
  </div>
</div>
<div class="container">
  <div class="facebook-event">
    <div class="event">
      <img src="https://images.unsplash.com/photo-1539027994943-7d6960acfaad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1c437d8504bbdc6f863f4e58a514ec45&auto=format&fit=crop&w=1950&q=80">
    </div>
  </div>
</div>

CSS

.container {
    transform: scale(0.5);
    float: left;
}
.facebook{
  width:820px;
  height: 1200px;
  border:1px solid #ccc; 
  overflow:hidden;
}
.facebook-event{
  width:820px;
  height: 1200px;
  border:1px solid #ccc; 
  overflow:hidden;
}
.facebook-event .event {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #cecece;
    transform: scale(0.428);
    position: absolute;
    top: -308px;
    left: -548px;
}
.facebook .cover{
  width:820px;
  height:310px;
  overflow:hidden;
  background:#cecece;
}
.facebook .profile{
  width:180px;
  height:180px;
  overflow:hidden;
  background:#ddd;
  position: absolute;
  top: 200px;
  left:10%;
}
.facebook .shared-img {
    width: 1200px;
    height: 630px;
    transform: scale(0.3);
    overflow: hidden;
    background: #ddd;
    position: absolute;
    top: 150px;
}
.facebook .shared-link {
    width: 1200px;
    height: 627px;
    transform: scale(0.3);
    overflow: hidden;
    background: #ddd;
    position: absolute;
    top: 400px;
}
.facebook .shared-high {
    width: 1200px;
    height: 717px;
    transform: scale(0.3);
    overflow: hidden;
    background: #ddd;
    position: absolute;
    top: 600px;
}