JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video">
  <a href="#" title="Titulo do video">
      <img src="http://bunzl.test/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/c/l/cloud-ffviiart.png" alt="thumbnail"/>
      <span class="play"></span>    
  </a>
</div>

CSS

.video {
  width: 205px;
  height 100px;
}
.video a { 
    text-decoration: none; 
    display:block; 
}
.video a span.play {
    display:block;
    background: url('https://s3.amazonaws.com/eclincher.wp.upload/wp-content/uploads/2018/02/02121139/youtube-logo-icon-transparent32-300x212.png') center center no-repeat;
    background-size: 60px 42.4px;
    margin: -80px 10px 0 0; 
    height: 60px; 
    position: relative; 
    z-index: 100; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
}