JSFiddle - React, Tailwind, and code Playground

HTML

<header>
</header>
<section class="flex-container">
    <div id="container">
     <!-- Each image is 480px by 270px -->
    <div class="photobanner">
        <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
        <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
</div>
    </div>
    <div class="mission">
    <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
    </div>
</section>

CSS

html {
    background-color: white;
    }
body {
    width: 1300px;
    margin: 0 auto 0;
    }
#container {
    width: 500px;
    overflow: hidden;
    margin: 50px 0; /* adjustment */
    background: white;
}
.photobanner {
    height: 270px;
    width: 6748px;
    margin-bottom: 80px;
    font-size:0px;
}
img{
  margin-right:2px;
}
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    }
.mission {
    margin: 25px;
    width: 300px;
    height: auto;
    }
.mission p {
    font-family: "europa",sans-serif;
    text-align: left;
    font-size: 18px;
    padding: 20px; 
    line-height: 125%;
    }
.first {
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6268px;
 }
}
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6268px;
 }
}
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6268px;
 }
}
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6268px;
 }
}
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6268px;
 }
}
img{
  margin-right:2px;
}