JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div id="frame">
            <div id="gallery">
                <a href="#x1"><img class="p1" src="http://sites.google.com/site/codovation/thumb1.png" alt="image 1" /></a> 
                <a href="#x2"><img class="p2" src="http://sites.google.com/site/codovation/thumb2.png" alt="image 2" /></a>
                <a href="#x3"><img class="p3" src="http://sites.google.com/site/codovation/thumb3.png" alt="image 3" /></a>
                <a href="#x4"><img class="p4" src="http://sites.google.com/site/codovation/thumb4.png" alt="image 4" /></a>
            </div>
        </div>
</div>

CSS

#frame 
{
    background:url(http://sites.google.com/site/codovation/greenRectanglePortrait.png) no-repeat center;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    width:352px; 
    height:544px; 
    padding:20px; 
    margin: 0px auto;
    border:1px solid #ddd;
}
#gallery 
{
    width:352px; 
    height:544px; 
    position:relative; 
    overflow:hidden; 
}
#gallery a img {border:0;}
#gallery img 
{
    position:absolute; 
    left:-350px; 
    z-index:1; 
    top: 50%;
    border:0;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration:40s;
}

#gallery img.p1 {left:0;}

/* for Safari and Chrome */

@-webkit-keyframes show1 {
    0% {left:0;}
    10% {left:0;}
    11% {left:350px;}
    100% {left:350px;}
}

@-webkit-keyframes show2 {
    0% {left:-350px;}
    10% {left:-350px;}
    11% {left:0;}
    20% {left:0;}
    21% {left:-350px;}
    100% {left:-350px;}
}

@-webkit-keyframes show3 {
    0% {left:350px;}
    20% {left:350px;}
    21% {left:0;}
    30% {left:0;}
    31% {left:350px;}
    100% {left:350px;}
}

@-webkit-keyframes show4 {
    0% {left:-350px;}
    30% {left:-350px;}
    31% {left:0;}
    40% {left:0;}
    41% {left:350px;}
    100% {left:350px;}
}

#gallery img.p1 {
    -webkit-animation-name: show1;
}

#gallery img.p2 {
    -webkit-animation-name: show2;
}

#gallery img.p3 {
    -webkit-animation-name: show3;
}

#gallery img.p4 {
    -webkit-animation-name: show4;
}

#gallery:hover img {
    -webkit-animation-play-state: paused;
}