JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
                    <div class="slider-content">
                        <div class="pause-button">&#9612;&#9612;</div>
                        <img src="http://demos.namanyayg.com/furiousnerds/images/football1.jpg" alt="Football!">
                <img src="http://demos.namanyayg.com/furiousnerds/images/football2.jpg" alt="Football!">
                <img src="http://demos.namanyayg.com/furiousnerds/images/football3.jpg" alt="Football!">
            </div>
            </div>

CSS

#slider {
  width:100%;
  height:400px;
  position:relative;
  overflow:hidden;
}

#slider img {
  width:33.3333333333%;
  float:left;

  -webkit-filter: grayscale(1);
  filter:gray;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);


  -webkit-transition:all 1s ease-in-out .5s;
  -moz-transition:all 1s ease-in-out .5s;
  -ms-transition:all 1s ease-in-out .5s;
  -o-transition:all 1s ease-in-out .5s;
  transition:all 1s ease-in-out .5s;
}

#slider img:hover {
  filter:none;
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  filter: grayscale(0);
} 


.slider-content {
  width:300%;

  -webkit-animation: movement 20s infinite;
  -moz-animation: movement 20s infinite;
  -o-animation: movement 20s infinite;
  -ms-animation: movement 20s infinite;
  animation: movement 20s infinite;
}

.slider-content:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.pause-button {
  position:absolute;
  top:0;
  left:10px;
  color:white;
  font-size:2em;
  z-index:300;

  opacity:0;
}

.slider-content:hover .pause-button {
  opacity:1;
}

@-moz-document url-prefix() {
  .pause-button {
    display:none;
  }

  .slider-content:hover .pause-button {
    display:none;
  }
}
@-webkit-keyframes movement {
  16.665% {margin-left:-100%;}
  33.33% {margin-left:-100%;}

  50% {margin-left:-200%;}
  66.66% {margin-left:-200%;}

  83.325% {margin-left:0;}
  100% {margin-left:0;}
}


@-moz-keyframes movement {
  16.665% {margin-left:-100%;}
  33.33% {margin-left:-100%;}

  50% {margin-left:-200%;}
  66.66% {margin-left:-200%;}

  83.325% {margin-left:0;}
  100% {margin-left:0;}
}


@-o-keyframes movement {
  16.665% {margin-left:-100%;}
  33.33% {margin-left:-100%;}

  50%...