JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="module-box">
	<div class="module-dummy"></div>
	<div class="module-body">
		<a href=" #">
    <div class="play-button-div">
				<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"/>
				
				  <span class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
			  </div>
      </a>
	</div>
</div>

CSS

.module-box {
	display: inline-block;
    position: relative;
	width: 100%;
}

.module-dummy {
	margin-top: 100%;
}

.module-body {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.play-button-div {
    margin: 0 auto;
   tex-align: center;
}

.play-button-div i{
    width: 100px;
    height: 100px;
    color: #0080ff;
    background-color: #fff;
    border-radius: 50px;
	  border: 2px solid #0080ff;
    font-size: 80px;
   text-align: center;
}