JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid main-slide">
  <div class="mask"></div>
  <div class="cycle-slideshow" style="position: relative;">

      <img class="slide" src="http://placekitten.com/g/200/300" />      
      <img class="slide" src="http://placekitten.com/g/200/300"  />      
      <img class="slide" src="http://placekitten.com/g/200/300" />      
      <img class="slide" src="http://placekitten.com/g/200/300" />
  </div>
</div>

CSS

.main-slide{
    height:520px; 
    max-width:1920px;
    padding:0;  
    overflow:hidden;
    position: relative;
    border: 2px solid green;
}
.slide {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    margin-left: 50%;
    margin-top: 50%;
}