JSFiddle - React, Tailwind, and code Playground

HTML

<section id="COMPARE" style="margin-left: 100px;">
  <div class="container">
    <div class="col-md-12 background1">

      <div class="im1 col-md-3" style="position:relative; margin-left:40px;">
        <img class="car" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97120&w=200&h=120">  
        <img class="vs" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=55%C3%9755&w=55&h=55" width="55px" height="55px">
        <img class="car" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97120&w=200&h=120">  
        <img class="vs" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=55%C3%9755&w=55&h=55" width="55px" height="55px">
        <img class="car" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97120&w=200&h=120">  
        <img class="vs" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=55%C3%9755&w=55&h=55" width="55px" height="55px">
        <img class="car" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97120&w=200&h=120">  
      </div>
    </div>
  </div>
</section>

CSS

.background1{
  width: 100%;
}
.im1{
  margin-top: 10px;
  z-index: 1;
  width: 100%;
  font-size: 0;
}
.im1 img{
  position: relative;
  display: inline-block;
}
.car{
  width: 25%;
  z-index: 1;
}
.vs{
  margin: 0 -30px 30px;
  z-index: 100;
}

@media only screen and (max-width: 768px){
  .car{
    width: 50%;
  }
}

@media only screen and (max-width: 480px){
  .car{
    width: 100%;
  }
  .vs{
    display: block!important;
    margin: -20px auto;
  }
}