JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <h1>Animated Photo Banner</h1>
            <p>An animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: no JavaScript!
            It also uses individual images inserted via HTML, not simply one long repeating CSS background. <a href="http://designshack.net/articles/css/infinitephotobanner/">Click here</a>
            to return to the tutorial on Design Shack.</p>
        </header>
        
        <!-- Each image is 350px by 233px -->
        <div class="photobanner">
            <img class="first" src="https://s7.postimg.org/e0x1mmqkr/image-1.jpg" alt="" />
            <img src="https://s7.postimg.org/r3so6hoor/image-2.jpg" alt="" />
            <img src="https://s7.postimg.org/lsdrlqsbf/image-3.jpg" alt="" />
            <img src="https://s7.postimg.org/dmvpnlbsb/image-4.jpg" alt="" />
            <img src="https://s7.postimg.org/yjrxs9wyj/image-5.jpg" alt="" />
            <img src="https://s7.postimg.org/dbe9a9xqz/image-6.jpg" alt="" />
            <img src="https://s7.postimg.org/e0x1mmqkr/image-1.jpg" alt="" />
            <img src="https://s7.postimg.org/r3so6hoor/image-2.jpg" alt="" />
            <img src="https://s7.postimg.org/lsdrlqsbf/image-3.jpg" alt="" />
            <img src="https://s7.postimg.org/dmvpnlbsb/image-4.jpg" alt="" />
        </div>
    </div>
</body>

</html>

CSS

* {
            margin: 0;
            padding: 0;
        }
 
        body {
            background: url('https://s7.postimg.org/bv2qsmfjv/dark_geometric.png');
        }
 
        #container {
            width: 1000px;
            overflow: hidden;
            margin: 50px auto;
            background: white;
        }
        
                            /*header*/

        header {
            width: 800px;
            margin: 40px auto;
        }
 
        header h1 {
            text-align: center;
            font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
 
        }
 
        header p {
            font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
            text-align: justify;
        }
 
                            /*photobanner*/
 
        .photobanner {
            height: 233px;
            width: 3550px;
            margin-bottom: 80px;
        }
        
        .photobanner img {
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .photobanner img:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
            cursor: pointer;
            -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        }
        
                            /*keyframe animations*/

        .first {
            -webkit-animation: bannermove 30s linear infinite;
            -moz-animation: bannermove 30s linear infinite;
            -ms-animation: bannermove 30s linear infinite;
            -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
        }
 
        @keyframes bannermove...