JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
		<a href="https://www.netatlantic.com/resources/industries/agencies?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=agencies"><img id="center" src="https://www.netatlantic.com/featuredindustries/img/1.png" style="float:left; padding-left: 0px; margin: auto;" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Ad Agencies"/></a>

		<a href="https://www.netatlantic.com/resources/industries/high-volume-senders?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=high-volume-senders"><img src="https://www.netatlantic.com/featuredindustries/img/2.png" alt="thumbnail2" name="center" width="311" height="311" class="img1" id="center" style="float:left" longdesc="High-Volume Senders" align="left" hspace="0px"/></a>

		<a href="https://www.netatlantic.com/resources/industries/publishing?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=publishers"><img id="center" src="https://www.netatlantic.com/featuredindustries/img/3.png" style="float:left" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Publishers"/></a>

		</br><a href="https://www.netatlantic.com/resources/industries/politicalcampaigners?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=political"><img src="https://www.netatlantic.com/featuredindustries/img/4.png" alt="thumbnail1" name="center" width="311" height="311" id="center" style="float:left; padding-left: 0px; margin: auto; display: block;" longdesc="Political Senders" hspace="00px" float="left"/></a> 

		<a href="https://www.netatlantic.com/resources/industries/leadcapture?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=leadcapture"><img id="center" src="https://www.netatlantic.com/featuredindustries/img/5.png" style="float:left" hspace="00px" alt="thumbnail1" width="311" height="311" float="left"...

CSS

@media screen and (max-width : 15000px) {
       .center {
    margin: auto;
    width: 933px;
    height: 625px;
    border: 3px solid #AARRGGBB;
    padding-right: 0px;
}
}

@media screen and (min-width : 200px) and (max-width : 1024px) {
        .center {
    margin: auto;
    width: 622px;
    height: 933px;
    border: 3px solid #AARRGGBB;
    padding-right: 0px;
}
}
	@media screen and (max-width : 622px) {
        .center {
    margin: auto;
    width: 311px;
    height: 625px;
    border: 3px solid #AARRGGBB;
    padding-right: 0px;
}
}

 .img {
		float: left;
	 -webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4 ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4 ease-in-out;
transition-timing-function: linear;
}
	#center{
	position: relative;
	opacity: 0.5;
		}