JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="banner">
    <img class="bannerImg" src="" alt=""/>
    <div class="buttonImgContainer" >
        <span><a href="services.html"><img class="buttonImg" src="../img/logo.png" alt=""/></a></span>
        <span><a href="gallery.html"><img style="width:120%" class="buttonImg" src="../img/logo.png" alt="" /></a></span>
        <span><a href="estimate.html"><img class="buttonImg" src=../img/logo.png alt=""/></a></span>
        <span><a href="contactus.html"><img class="buttonImg" src="Images/ContactUsSquare.png" alt=""/></a></span>
    </div>
</div>

CSS

.banner {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.bannerImg {
    width: 100%;
    height : 100px;
}

.buttonImg      {
   width: 50px;
   height: 50px;
}

.buttonImgContainer span {
    width: 25%;
    float: left;
}

span{
    text-align: center;
}