JSFiddle - React, Tailwind, and code Playground

HTML

<div class="making-of">
      <div id="slide-top" class="slide start" onclick="C.nextSlide()">
        <p>Click to Play</p>
      </div>
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-1.jpg" width="525px" heightwidth="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-2.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-3.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-4.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-5.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-6.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-7.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-8.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-9.jpg" width="525px" height="350px" class="slide">
      <img src="http://random.twonegatives.com.s3-website-us-east-1.amazonaws.com/id-cycle-rendering-demo/low-making-of/making-of-10.jpg" width="525px" height="350px" class="slide">
      <img...

CSS

body {
   font-family: sans-serif;
   font-weight: bold;
   font-size: 2em;
   color: white;
}

.making-of {
   position: fixed;
   z-index: 2000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,.9);
}

.making-of .slide {
   position: fixed;
   opacity: 0;
   top: 50%;
   left: 50%;
   width: 525px;
   height: 350px;
   margin-top: -175px;
   margin-left: -262px;
   text-align: center;
   background: rgba(0,0,0,.6);
    
   -webkit-transition: opacity 500ms;
   -moz-transition: opacity 500ms;
}

.making-of .slide.end {
   z-index: 3000;
}

.making-of .slide#slide-top {
   opacity: 1;
}

JavaScript

window.C = {
  nextSlide: function () {
    var topSlide = document.getElementById('slide-top');
    var nextTopSlide = topSlide.nextElementSibling;
    topSlide.id='';
    nextTopSlide.id='slide-top';
    if (!nextTopSlide.classList.contains('end')) {
      setTimeout(C.nextSlide, 244);
    }
  },

  replay: function () {
    document.getElementById('slide-top').id='';
    document.getElementsByClassName('slide')[0].id='slide-top';
    setTimeout(C.nextSlide, 244);
  }
}