JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;slider.css&quot;&gt;"></script>
   
<body>
<header>
    <div>
        <img src="http://schedule.wttw.com/ulphoto/wttw_1342026073.jpg" float:left; alt="Square-tailed kite">
        <img src="http://trash-russia.com/wp-content/uploads/2014/10/national-geographic-photo-contest-wild-nature-of-russia-2014.jpg" alt="White-tailed kite" float:left;>
        <img src="http://caucasus-naturefund.org/wp-content/uploads/2012/11/800x400_lagodekhi.jpg" float:left; alt="Hawk">
        <img src="http://schedule.wttw.com/ulphoto/wttw_1351524790.jpg" alt="Osprey">
        <img src="https://blog.virgin-atlantic.com/t5/image/serverpage/image-id/3616i3B87C94B15C8EADF?v=mpbl-1" alt="Square-tailed kite">
    </div>
</header>
</body>
</html

CSS

header { border: 1px solid black; background: #000 }
header, div img { width: 800px; height: 341px; }
header { overflow: hidden; }

div { width:4000px; }
/* slider code */

@-webkit-keyframes slider {
    0% { -webkit-transform: translateX(0px); }
    20% { -webkit-transform: translateX(0px); }
    25% { -webkit-transform: translateX(-800px); }
    45% { -webkit-transform: translateX(-800px); }
    50% { -webkit-transform: translateX(-1600px); }
    70% { -webkit-transform: translateX(-1600px); }
    75% { -webkit-transform: translateX(-2400px); }
    95% { -webkit-transform: translateX(-2400px); }
    100% { -webkit-transform: translateX(-3200px); }
}
div {
    -webkit-animation-name: slider;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-name: slider;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}