JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="container">

	<div class="wrapper">
		<div class="content">
		</div>
	</div>
	
</div>

CSS

html,body {
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#container {
	position: relative;
	background: rgba(0,0,255,0.5);
	/* Force scrollbar visible */
	min-height: 101%;
}
#container .wrapper {
	padding-top: 10%;
}
#container .content {
	background: #fff;
	padding: 150px 30px;
	text-align: center;
	font-size: 100px;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}
#container .content .small {
	font-size: 50px;
}
@media screen and (max-width: 600px) {
	#container {
		background: rgba(255,0,0,0.5);
	}
}

JavaScript

(function($) {

$(function() {
	$(window).on('resize', function() {
		$('#container .content').html('<span class="small">jQuery:</span> ' + $(this).width() + '<br/>' + '<span class="small">JavaScript:</span> ' + window.innerWidth);
	}).trigger('resize');
});

})(jQuery);