JSFiddle - React, Tailwind, and code Playground

by rezon73

HTML

<div id="content"></div>

CSS

body {
  font-family: Arial,"Arial Cyr",Verdana;
  letter-spacing: 0px;
  background-color: #5da9cb;
  background-position: center;
  font-size: 14px;
  margin: 0px;
  padding: 0px;
  color: black;
  overflow:hidden;
}

#content {
	width: 240px; height: 240px;
	margin: 3%; padding: 0px;
	position: relative;
	border: 2px #92cce5 solid;
	background-color: white;
}

JavaScript

var screenWidth;
var screenHeight;

if (screen.width > $(window).width()) screenWidth = $(window).width();
else screenWidth = screen.width;
if (screen.height > $(window).height()) screenHeight = $(window).height();
else screenHeight = screen.height;

$(window).bind('load resize',function() {
	if (screen.width > $(this).width()) screenWidth = $(this).width();
	else screenWidth = screen.width;
	if (screen.height > $(this).height()) screenHeight = $(this).height();
	else screenHeight = screen.height;
	
	w = parseInt(screenWidth*0.94);
	$('#content').css({width: w});
	h = parseInt(screenHeight*0.92-50);
	$('#content').css({height: h});
  
  console.log($(this).width(),$(this).height());
});