JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="featured-work-slider flexslider">
    <ul class="slides">
		<li>		   
<div class="background-sky">	
		<h1 class="hero-title1">1 слайд</h1>
    <ul class="animate-block">
        <li>
            Анимированный блок 1
        </li>
     </ul>
</div>	
	 </li> 
	 <li>		    
<div class="background-night">	
		<h1 class="hero-title2">2 слайд</h1>
    <ul class="animate-block2">
        <li>
            Анимированный блок 2
        </li>
     </ul>
</div>	
	 </li> 
	 </ul>
	
</div>

CSS

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
body, html, main {
background:#fff;
height: 100%;
font-size: 12px;
font-weight: 300;
line-height: 26px;
}
.background-sky, .background-night {
	background-color: #07a8dd;	
    display: block;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
	height: 520px;
}
.background-night {
    background-color: #59CB59;
}
.slides li li{
  transition: all 800ms  ease-in-out;
   width: 0;
}
.slides li.flex-active-slide li{
  width: 100%;
}

JavaScript

$('.flexslider').flexslider({
   animation: "fade",
   directionNav: false,
    controlNav: false, 
   slideshowSpeed: 7000,       
    animationSpeed: 600
});