JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nicinabox.com/superslides/dist/jquery.superslides.js"></script>
  <div id="slides">
    <ul class="slides-container">
        <li>
		    <div class="slider_content">
                <h1>Some Text</h1>
                <p>Quisque ultrices, libero eget aliquet consequat, sapien leo sollicitudin ligula, fermentum luctus enim libero a neque. Nam dapibus, lectus nec condimentum volutpat, diam nisl cursus odio, vitae luctus libero augue at dolor. Nullam ut quam ut augue facilisis ultrices eget non risus.</p>
            </div>
            
            <img src="http://nicinabox.com/superslides/images/building.jpg" width="1024" height="682" alt=""/>
        
        </li>
        
        <li>
		    <div class="slider_content">
                <h1>Some More Text</h1>
                <p>Quisque ultrices, libero eget aliquet consequat, sapien leo sollicitudin ligula, fermentum luctus enim libero a neque. Nam dapibus ut quam ut augue facilisis ultrices eget non risus.</p>
            </div>
            
            <img src="http://nicinabox.com/superslides/images/dog.jpg" width="1024" height="682" alt=""/>   
        </li>
    </ul>

    <nav class="slides-navigation">
      <a href="#" class="next">Next</a>
      <a href="#" class="prev">Previous</a>
    </nav>
  </div>

CSS

/* ---------- CSS Reset ---------- */

* {
	border: 0;
	color: #555555;
	font-size: 20px;
	font-family: Tahoma, Arial;
	font-weight: normal;
	vertical-align: top;
	box-sizing: 		border-box;
	-moz-box-sizing: 	border-box;
	-webkit-box-sizing: 	border-box;
	margin: 0;
	padding: 0;
}

/* ---------- Home Slider ---------- */

.slider_content {
	display: inline-block;
	padding: 0px 15%;
	position: absolute;
	top: 50%;
	text-align: center;
}

.slider_content h1 {
	color: #FFFFFF;
	font-family: "Century Gothic";
	font-size: 45px;
	text-transform: uppercase;
}

.slider_content p {
	color: #FFFFFF;
	font-family: "Neue Haas Grotesk Light", Tahoma, Arial;
	font-size: 23px;
}

JavaScript

// INITIATE SLIDER
    
    $(function() {
        $('#slides').superslides({
            hashchange: false
        });
    });

	// VERTICALLY ALIGNS THE SLIDER CONTENT ON LOAD (NOT WORKING)

		$(window).load(function() {
			$('.slider_content').each(function(event) {
				$(this).css({"margin-top": - ( $(this).outerHeight()/2 ) });
			});
		});

    // VERTICALLY ALIGNS THE SLIDER CONTENT ON RESIZE (WORKING)

		$(document).ready(function() {
			$(window).resize(function() {
				$('.slider_content').each(function(event) {
					$(this).css({"margin-top": - ( $(this).outerHeight()/2 ) });
				});
			});
		});