JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="slider">
        <div id="mask">
            <div id="fig-container">
                <figure>
                    <img src="http://cdn.theatlantic.com/static/mt/assets/science/Screen%20Shot%202012-08-29%20at%201.45.48%20PM.png" alt="Shopping centre" />
                    <figcaption>1</figcaption>
                </figure>
                <figure>
                    <img src="http://cdn.theatlantic.com/static/mt/assets/science/Screen%20Shot%202012-08-29%20at%201.45.48%20PM.png" alt="SS Great Britain" />
                    <figcaption>2</figcaption>
                </figure>
                <figure>
                    <img src="http://cdn.theatlantic.com/static/mt/assets/science/Screen%20Shot%202012-08-29%20at%201.45.48%20PM.png" alt="Suspension Bridge" />
                    <figcaption>3</figcaption>
                </figure>
                <figure>
                    <img src="http://cdn.theatlantic.com/static/mt/assets/science/Screen%20Shot%202012-08-29%20at%201.45.48%20PM.png" alt="Suspension Bridge" />
                    <figcaption>4</figcaption>
                </figure>
            </div>
        </div>
    </div>

CSS

#content {
    background-color: white;
    /* border: 1px solid black; */
    padding: 0;
    width: 100%;
    -webkit-box-shadow: 0px 0px 30px 4px #acafb3;
    -moz-box-shadow: 0px 0px 30px 4px #acafb3;
    box-shadow: 0px 0px 30px 4px #acafb3;
}
#slider {
    background-image: url('images/ssgbritain.jpg');
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 265px;
    width: 998px;
    overflow: visible;
    position: relative;
}
#fig-container {
    margin:0;
    padding:0;
    position:relative;
}
#mask {
    overflow: hidden;
    height: 270px;
}
#slider figure {
    width: 998px;
    /* Width Image */
    height: 265px;
    /* Height Image */
    position: absolute;
    top: -270px;
    /* Original Position - Outside of the Slider */
}
figure img {
    max-width: 100%;
    max-height: 100%;
}
figure:nth-child(1) {
    animation:cycle 25s linear infinite;
    -moz-animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;
}
figure:nth-child(2) {
    animation:cycle2 25s linear infinite;
    -moz-animation:cycle2 25s linear infinite;
    -webkit-animation:cycle2 25s linear infinite;
}
figure:nth-child(3) {
    animation:cycle3 25s linear infinite;
    -moz-animation:cycle3 25s linear infinite;
    -webkit-animation:cycle3 25s linear infinite;
}
figure:nth-child(4) {
    animation:cycle4 25s linear infinite;
    -moz-animation:cycle4 25s linear infinite;
    -webkit-animation:cycle4 25s linear infinite;
}
figure:nth-child(5) {
    animation:cycle5 25s linear infinite;
    -moz-animation:cycle5 25s linear infinite;
    -webkit-animation:cycle5 25s linear infinite;
}
@keyframes cycle {
    0% {
        left: 0px;
    }
    25% {
        left: 0px;
    }
    26% {
        left: -270px;
    }
    96% {
        left: -270px;
    }
    100% {
        left: 0px;
    }
}
@-webkit-keyframes cycle {
    0% {
        left: 0px;
    }
    4% {
        left: 0px;
    }
    25% {
        left: 0px;
    }
   ...