JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="nav">
</nav>

<div class="video-box">
  <div class="vid-container">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/V0HCZ4YGqbw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <div class="like-and-share">
  <button><i class="fa fa-heart"></i> Da hora</button>
  <button><i class="fa fa-share"></i> Mostrar pra Geral</button>
  </div>
</div>
<div class="space-hold">

</div>

<div class="comment-section">
<h2> O que os nego acharam disso:
</h2>
<div class="comment">
<h3 class="comment-header">
Fulano - <a href="#">Há 3 min</a>
</h3>
<p class="comment-body">
Carai que doido jow.
</p>
</div>
<div class="comment">
<h3 class="comment-header">
Ciclano - <a href="#">Há 46 min</a>
</h3>
<p class="comment-body">
Topzera mano, possa crer
</p>
</div>
</div>

SCSS

body {
  margin: 0; padding: 0;
  overflow-x: hidden;
  font-family: 'Verdana', sans-serif;
}

* {
  box-sizing: border-box;
}

.video-box {
  .vid-container {
    bottom: 30px;
    top: 0; left: 0; right: 0;
    position: absolute;
  }
  top: 50px;
  height: calc(100vh - 50px);
  width: 100vw;
  background: rgba(0,0,0,0.7);
  position: absolute;
  .like-and-share {
    position: absolute;
    height: 30px;
    width: 100vw;
    top: auto;
    bottom: 0;
    background-color: rgba(255,255,255,0.3);
    button {
      height: 30px;
      line-height: 30px;
      padding: 0 22px;
      border: 1px solid transparent;
      background: transparent;
      color: #f2f2f2;
      cursor: pointer;
      &:hover {
        border-color: #f2f2f2;
        background-color: #f2f2f2;
        color: #343434;
      }
    }
  }
}
.nav {
  background: black;
  height: 50px;
}
.space-hold {
  height: calc(100vh - 50px);
}

.comment-section {
  h2 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 12px;
  }
  h3, h4, h5, p {
    margin: 4px 12px;
  }
  .comment {
    h3 {
      font-size: 0.8em;
      opacity: 0.7;
      a {
        color: inherit;
        opacity: 0.5;
        font-weight: regular;
      }
    }
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 4px;
    margin: 12px;
    padding: 8px;
  }
}