JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="container-fluid main-slide">
  <div class="mask"></div>
  <div class="cycle-slideshow" style="position: relative;">

      <img src="http://lorempixel.com/400/200/sports/Dummy-Text/">
      <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text">
      <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text">
      <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" >
  </div>
</div>

CSS

.main-slide{
    height:150px; 
    width:100%; 
    max-width:1920px;
    padding:0; 
    margin:0 auto; 
    overflow:hidden;
    position: relative;
}

.cycle-slideshow img{margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;}