JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.core.min.js"></script>
<div class="cycle-slideshow full figure" data-cycle-speed="1000" data-cycle-timeout="7000" data-cycle-slides="> div">
    <div class="cycle-slide slide bgimg2 full" style="background-image:url('http://interiorsbyadg.net/wp-content/themes/adg/img/homepage/slide5.jpg');"></div>
    <div class="cycle-slide slide bgimg2 full" style="background-image:url('http://interiorsbyadg.net/wp-content/themes/adg/img/homepage/slide1.jpg');"></div>
    <div class="cycle-slide slide bgimg2 full" style="background-image:url('http://interiorsbyadg.net/wp-content/themes/adg/img/homepage/slide2.jpg');"></div>
    <div class="cycle-slide slide bgimg2 full" style="background-image:url('http://interiorsbyadg.net/wp-content/themes/adg/img/homepage/slide3.jpg');"></div>
    <div class="cycle-slide slide bgimg2 full" style="background-image:url('http://interiorsbyadg.net/wp-content/themes/adg/img/homepage/slide4.jpg');"></div>
  </div>

CSS

body, html {
    margin:0;
    border:0;
    padding:0;
    overflow:hidden;
}
.cycle-slide {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
		-webkit-transition-property: -webkit-filter;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 2s;
		transition-property: -webkit-filter, filter;
		transition-duration: 4s;
		transition-timing-function: ease;
		transition-delay: 2s;
}

body.loaded .cycle-slide-active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.cycle-slideshow, .cycle-slide {
    width: 100%;
    height: 100%;
    position:absolute;
}

.bgimg2 {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}

JavaScript

$('body').addClass('loaded')