JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>

CSS

body{
  margin:0;
}
.wrap{
  max-width:960px;
}
.a{
    position:relative;
	top:0;
	left:0;
	width:100%;
	float:left;
	padding-bottom: 47%;
	overflow:hidden;
	cursor: pointer;
  background:red;
}
.a:nth-child(1){
   background:blue;
}
.a:nth-child(2){
   background:green;
}
@media (min-width: 500px) { 
	.a{
		width: 50%;
		padding-bottom: 27%;
	}
}
@media (min-width: 700px) { 
	.a{
		width: 33.3333333%;
		padding-bottom: 19%;
	}
}