JSFiddle - React, Tailwind, and code Playground

by Skaiman

HTML

<div class="content">
  <div class="item">
    <a href="#"><img src="https://imgholder.ru/468x60/446CB3/fff&font=bebas&fz=30"></a>
    <a href="#"><img src="https://imgholder.ru/468x60/446CB3/fff&font=bebas&fz=30"></a>
  </div>
  <div class="item">
    <a href="#"><img src="https://imgholder.ru/468x60/1BA39C/fff&font=bebas&fz=30"></a>
    <a href="#"><img src="https://imgholder.ru/468x60/1BA39C/fff&font=bebas&fz=30"></a>
  </div>  
</div>

CSS

.content {
   display: block;
   width: 100%;
}

.content .item {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;  
}

.content .item  a {
  flex-basis: 45%;
  margin: 0 2px;
}

.content .item  a img {
  width: 100%;
  max-width: 468px;
}

.content .item a:nth-child(1) {
  text-align: right;
}