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>
            Анимированный блок 2
        </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;
}
.flex-nav-prev {
    background: #ffffff;    
    left: 10px;
    position: absolute;
    top: 50%;   
    z-index: 50;
}
.flex-prev {
    display: block;
    height: 20px;
    width: 20px;
}
.flex-nav-next {
    background: #ffffff;    
    right: 10px;
    position: absolute;
    top: 50%;   
    z-index: 50;
}
.flex-next {
    display: block;
    height: 20px;
    width: 20px;
}

JavaScript

$('.flexslider').flexslider({
   animation: "fade",
    start: function(){
	var sl = $(".flex-active-slide");	
		sl.find('.hero-title1').delay(1000).animate({
            marginLeft: '-=200px',
            opacity:1}, 1000);		
        sl.find('.animate-block').delay(2000).animate({
         			   marginLeft: '200px',
          			   opacity:1}, 1000);
	},
    after: function(){	
        var sl = $(".flex-active-slide");	
		    sl.find('.hero-title1').animate({
          			  marginLeft: '-=200px',
         		      opacity:1}, 1000);		
        sl.find('.animate-block').delay(1000).animate({
            marginLeft: '200px',
            opacity:1}, 1000);
	},
     before: function(){ 
    	$('.hero-title1,\
           .animate-block').attr({ 'style' : ''   }).stop(true);	
   },
   nextText: "",
   prevText: "",
   slideshowSpeed: 7000,       
    animationSpeed: 600
});