JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
 <div class="movement-container">

  <!--Start Slider -->
   <section class="slider_holder">          
     <div class="slider">
      <div class="slides_container">
        	<ul class="slides">                
			<li>Content</li>
            <li>Content</li>
          </ul>
         </div>
       </div>
     </section>
    </div>
</div>

CSS

html, body { height: 100%;}

.main-container {float: left; width: 100%; height: 100%;}
.movement-container {margin: 0 auto; width: 60%; height: 100%; position: relative;}

.slider {float: left; width: 100%; height: 100%;}
.slides {height:100%; width: 100%; float: left; overflow: hidden;}
.slides li {width: 100%; height: 100%; float: left; background: red;}

.slider_holder, .slides_container { height: 100%;}