JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2 nopadding">
        <div class="nav-sidebar">
          <div id="logo">
            <div class="logo">
              <img src="https://i.ibb.co/RQGBXjK/logo.png">
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-10 col-md-10 col-lg-10 col-xl-10 nopadding">
        <div class="main-content gradient">

        </div>
      </div>
    </div>
  </div>

CSS

body {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: content-box;
    background: transparent;
}


.nopadding {
   padding: 0 !important;
} 


.container{
    background: transparent;
    width: 100vw;
    height: 100vh;
}

.nav-sidebar {
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #000;
    background: linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0.5)),url(https://i.ibb.co/1TBvfyP/1.jpg);
    border-right: 1px solid #000;
    box-shadow: inset 0px 5px 30px rgba(0,0,0,0.9), 
                0px 10px 15px 5px #000;
    z-index: 9999;
}

#logo {
    height:130px;
    width:100%;
} 
.logo img{
    vertical-align:bottom;
    width: 70px;
    height: auto;
    max-width:100%;
    -webkit-filter: drop-shadow(5px 10px 1px #000);
    filter: drop-shadow(5px 10px 2px #000);
}

.main-content{
    height: 100vh;
    background: black;
}


.gradient {
    background-color: #000;
    background-image: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)),url(https://i.ibb.co/8KSjNdL/gradient.png);
    background-blend-mode: overlay;
    width:100%;
    z-index:9999;
}

.main-content{
    background-position: top 50px center;
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

(function($){

	$.fn.chocolate = function(args) {

		// Default Options
		var options = $.extend({
			interval 	: 3000,
			speed 		: 1000
		}, args);

		return this.each(function() {
			
			var original = $(this);

			// Create element
			$div = $(document.createElement('div'));
			$div.css({
				position 	: 'absolute',
				zIndex 		: 0,
				overflow 	: 'hidden',
			});

			original.prepend($div);
		    $div.css(copybackground());
		    $div.css('background-image', 'url(' + args.images[0] + ')');
			
			// This element background none
			original.css('background', 'none');
		    
		    // Clone bg element
		    $div2 = $div.clone();
		    $div.after($div2);
			
			// Set postion
			$div.css(copyPosition());
			$div2.css(copyPosition());

			// Resize window
			$(window).resize(function() {
				$div.css(copyPosition());
				$div2.css(copyPosition());
			});

			// Copy background style
			function copybackground() {
				var backgroundProperties = [
		        	'Attachment', 'Color', 'Repeat',
		        	'Position', 'Size', 'Clip', 'Origin'
		    		];
			    var prop,
			    	copyStyle 			= {},
			    	i 					= 0;

			    for (; i < backgroundProperties.length; i++) {
			    	prop = 'background' + backgroundProperties[i];
			    	copyStyle[prop] = original.css(prop);
			    }

			    return copyStyle;
			}

			// Copy position style
		    function copyPosition() {
		    	var corners 	= ['Top', 'Right', 'Bottom', 'Left'];
			    var i 			= 0,
			    	position 	= original.position(),
			    	copyStyle 	= {
			    		top 	: position.top,
			    		left 	: position.left,
			    		width 	: original.innerWidth(),
			    		height 	: original.innerHeight()
			    	};

			    for (; i < corners.length; i++) {
		    		corner = corners[i];
		    		copyStyle['margin' + corner] = original.css('margin' + corner);
		    		copyStyle['border' + corner] = original.css('border' + corner);
		    	}

		    	return copyStyle;
		    }

		    var count 	= 0,
		    	current = 0;

			// Change...