JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<div class="outer-container">
			<div class="inner-container">
				<div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
					<div class="slide-inner-container">
						<div class="slider-content">
							<h4>The Course</h4>
							<p>
                                    Amid the paradise known as Southwest Florida, where golfers may choose from more golf courses per capita than most places in the world, Old Corkscrew has become legendary. Perhaps it's our 7,400 yerd, Jack Nicklaus Signature Design course or being a cerfified Audubon International Siler Signature Sanctuary. Immerse yourself in the boundless natural beauty of Old Corkscrew and see for yourself. 
                                </p>
						</div><!-- /.slider-content -->
						<div class="clearfix"></div>
					</div><!-- /.slide-inner-container -->
				</div><!-- /.slide -->
				<div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
					<div class="slide-inner-container">
						<!-- More content here soon -->
					</div><!-- /.slide-inner-container -->
				</div><!-- /.slide -->
				<div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
					<div class="slide-inner-container">
						<!-- More content here soon -->
					</div><!-- /.slide-inner-container -->
				</div><!-- /.slide -->
				<div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
					<div...

CSS

*, *:before, *:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body
{
    width: 100%;
    height: 100%;
    
    margin: 0;
    padding: 0;
}
body
{
    background: #444444;
}
.slide{
				overflow: hidden;
    height: 100% !important;
			}
			.slider-content{
				position: relative;
				background-color: rgba(0,0,0,0.6);
				width: 460px;
				padding: 20px;
				font-family: 'Open Sans';
				margin-left: 60%;
			}
				.slider-content h4{
					color: #9f876b; font-weight: normal;
					margin-bottom: 0px;
					margin-top: 0px;
					font-size: 40px;
				}
				.slider-content p{
					font-size: 15px;
					line-height: 20px;
					font-weight: 200;
					color: #fff;
					text-decoration: none;
					text-align: left;
					border-width: 0px;
					border-color: #222;
					border-style: none;
				}

JavaScript

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

$("*").css({"width": viewportWidth; "height": viewportHeight; "display": "none:});