JSFiddle - React, Tailwind, and code Playground

HTML

<div id='slider-shadow'>
<div id='slider'>
<div id='mask'>
<ul>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='We Are Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide1penyolongan.png'/></a>
</li>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='Visit And Follow Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide2penyolongan.png'/></a>
</li>
<li>
<a href='http://www.facebook.com/ariq.nsx' title='New Style'><img src='http://iamceege.com/pure-css3-content-slider/images/3.png'/></a>
</li>
<li>
<a href='https://www.facebook.com/groups/penyolongan.cheater/' title='The Best information Site'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide3penyolongan.png'/></a>
</li>
</ul>
</div>
<div id='progress'></div>
<div id='overlay'></div>
<div id='pause'></div>
</div></div>

CSS

#slider {
width: 600px;
height: 200px;
position: relative;
margin: 0px auto 0;
background-color:
#2C0036;
border: 10px solid
#2C0036;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 250ms ease-in;
-webkit-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
border-top: 10px solid
rgba(0, 0, 0, 0.2);
}
#slider:hover {
background-color:#fff;
border:10px solid #fff;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause {
opacity:1;
}
#slider:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#mask {
overflow:hidden;
}
#pause {
width:600px;
height:200px;
position:absolute;
top:0;
opacity:0;
background-image:url(http://2.bp.blogspot.com/-C0ulqVdAHgE/T4AoidhBQ_I/AAAAAAAABhA/vnZy9E5nVB4/s1600/paused.png);
background-position:566px 10px;
background-repeat:no-repeat;
pointer-events:none;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
}
#progress {
width:1px;
height:3px;
position:relative;
top:-1px;
background-color:#BCEB04;
-moz-transition:all 150ms linear;
-webkit-transition:all 150ms linear;
-o-transition:all 150ms linear;
-moz-animation:progress 18s infinite;
-webkit-animation:progress 18s infinite;
}
#overlay {
width:600px;
height:200px;
position:absolute;
top:0;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
opacity:0.5;
-moz-animation:overlay-fade 18s infinite;
}
#slider ul {
width:2400px;
position:relative;
left:0px;
margin:0;
padding:0;
list-style:none;
-moz-animation:slide-animation 18s infinite;
-webkit-animation:slide-animation 18s infinite;
}
#slider li...