JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section">
  <ul class="grid">
      <li>
        <a class="thumb">
          <img src="http://img.youtube.com/vi/eBJku04ma0E/0.jpg">
        </a>
      </li><li>
        <a class="thumb" >
          <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
      </li><li>
        <a class="thumb" >
          <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
      </li>
  </ul>
</div>

CSS

* { box-sizing: border-box }

#section { width: 940px; background: red; height: 500px }

ul.grid li {
  background: rgba(0,0,0,0.2);
  display: inline-block;
  width: 310px;
  padding:10px;
  margin-right: 5px;
}
ul.grid li:nth-child(3n) {
  margin-right: 0;
}
ul.grid .thumb {
  float:left;
}

ul.grid img {
  border:none ;
}
.thumb {
  overflow: hidden;
  height:99px;
}
.thumb img {
  height: 127px;
  margin-top: -16px;
}