JSFiddle - React, Tailwind, and code Playground

HTML

<body onResize="window.location=window.location;">
          <div id="cover" class="panel">
          <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg" class="background"/>
               <div id="cover-section">
               CONTENT GOES HERE
               </div>
          </div>
          <div id="panel1" class="panel">
          <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"/>
          </div>
          <div id="panel2" class="panel">
          <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"/>
          </div>
          <div id="panel3" class="panel">
          <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"/>
          </div>
          <div id="panel4" class="panel">
          <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
          </div>
     </body>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 0;
}

body {
    overflow-x: scroll;
    overflow-y: scroll;
    white-space: nowrap;
}

.panel {
    margin: 50px;
    padding: 0;
    display: inline-block;
    position: relative;
}

img {
    display: inline-block;
}

#cover-section {
    white-space: normal;
    position: absolute;
    bottom: 0;
    width: 80%;
    height: auto;
    margin: 0 10%;
    background-color: #F00;
    opacity: 0.5;
    font-size: 24px;
    text-align: center;
}