JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.kompulsor.com/infl8or/js/supersized.core.3.2.1.min.js"></script>

CSS

* {
    margin: 0;
    padding: 0;
}
#supersized a {
    background: none repeat scroll 0 0 #111;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -30;
    display: block;
}
#supersized a.activeslide {
    z-index: -10;
}
body {
    background: none repeat scroll 0 0 #111;
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
}
* {
    margin: 0;
    padding: 0;
}
#supersized a {
    background: none repeat scroll 0 0 #111;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -30;
    display: block;
}
#supersized a.activeslide {
    z-index: -10;
}
body {
    background: none repeat scroll 0 0 #111;
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
}
/* From Supersized CSS */

/*

	Supersized - Fullscreen Slideshow jQuery Plugin
	Version : Core 3.2.1
	
	Site	: www.buildinternet.com/project/supersized
	Author	: Sam Dunn
	Company : One Mighty Roar (www.onemightyroar.com)
	License : MIT License / GPL License
	
*/
 * {
    margin:0;
    padding:0;
}
body {
    background:#111;
    height:100%;
}
img {
    border:none;
}
#supersized-loader {
    position:absolute;
    top:50%;
    left:50%;
    z-index:0;
    width:60px;
    height:60px;
    margin:-30px 0 0 -30px;
    text-indent:-999em;
    background:url(../img/progress.gif) no-repeat center center;
}
#supersized {
    position:fixed;
    left:0;
    top:0;
    overflow:hidden;
    z-index:-999;
    height:100%;
    width:100%;
}
#supersized img {
    width:auto;
    height:auto;
    position:relative;
    outline:none;
    border:none;
}
#supersized a {
    z-index:-30;
    position:fixed;
    overflow:hidden;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#111;
    display:block;
}
#supersized a.image-loading {
    background:#111 url(../img/progress.gif) no-repeat center center;
    width:100%;
    height:100%;
}

JavaScript

jQuery(function ($) {
    
    $.supersized({
        
        //Functionality
        slideshow: 0, //Slideshow on/off
        autoplay: 1, //Slideshow starts playing automatically
        start_slide: 1, //Start slide (0 is random)
        random: 0, //Randomize slide order (Ignores start slide)
        slide_interval: 6000, //Length between transitions
        transition: 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed: 500, //Speed of transition
        new_window: 1, //Image links open in new window/tab
        pause_hover: 0, //Pause slideshow on hover
        keyboard_nav: 0, //Keyboard navigation on/off
        performance: 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
        image_protect: 1, //Disables image dragging and right click with Javascript
        image_path: 'img/', //Default image path
        //Size & Position
        min_width: 0, //Min width allowed (in pixels)
        min_height: 0, //Min height allowed (in pixels)
        vertical_center: 0, //Vertically center background
        horizontal_center: 0, //Horizontally center background
        fit_portrait: 1, //Portrait images will not exceed browser height
        fit_landscape: 0, //Landscape images will not exceed browser width
        //Components
        navigation: 0, //Slideshow controls on/off
        thumbnail_navigation: 0, //Thumbnail navigation
        slide_counter: 0, //Display slide numbers
        slide_captions: 0, //Slide caption (Pull from "title" in slides array) 				
        
        slides: [{
            image: 'http://www.kompulsor.com/img/redbluebg.png',
            title: 'Test'
        }]
    });
});