JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="one"></div>
  <div class="two">
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/125x20"></a>
  </div>
  <div class="three">
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/350x80"></a>
  </div>
  <div class="four">
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/250x80"></a>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template: 30px 50px 278px 200px / 1fr;
}

.one {
  background: red;
}

.two {
  background: blue;
  display: grid;
  
  /*Horizontal Align*/
  justify-items: center;
}

.three {
  background: green;
  display: grid;
  
  /*Vertical Align*/
  align-items: center;
}

.four {
  background: purple;
  display: grid;
  
  /*Vertical & Horizontal Align*/
  align-items: center;
  justify-items: center;
}