JSFiddle - React, Tailwind, and code Playground

HTML

<div id="father">
    <div id="left" class="block"></div>
    <div id="center" class="block">
      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
    </div>
    <div id="right" class="block"></div>
  </div>

CSS

body, html {
      height: 100%;
    }
    #father{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .block{
      width: 33%;
      height: 100%;
    }
    #left{
      background-color: red;
    }    
    #center{
      background-color: black;
    }
    #right{
      background-color: blue;
    }
    img {
      width: 30%;
    }
    @media (max-width: 1024px) {
      #left{
        display: none;
      }
      #right{
        display: none;
      }
      #center{
        width: 100%;
      }
      img{
        width: 30%;
      }
    }
    @media (max-width: 768px) {
      img{
        width: 45%;
      }
    }
    @media (max-width: 500px) {
      img{
        width: 100%;
      }
    }