JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<link rel = "stylesheet" type = "text/css" href = "styles/main.css">
	</head>
	<body class = "pattern1">
		<div class = "dheadercontainer blocke pinky">
			<div class = "dheaderlogo blocke yelly">
        LOGO
			</div>
			<div class = "dheaderlogin blocke yelly">
        LOGIN
			</div>
		</div>
		<div class = "dcontentcontainer blocke pinky">
			<div class = "dcontentmenu blocke yelly">
			</div>
			<div class = "dcontentcontent blocke yelly">
			
			</div>
		</div>
	</body>
</html>

CSS

/* MAIN RULES */

html,
body
{
	width : 100%;
	height : 100%;
	
	padding : 0;
	margin : 0;
}

/* TEMPLATES */

.pinky
{
	background:
		linear-gradient(180deg, rgba(255, 128, 255, 0.7), rgba(255, 128, 255, 0.2) 50%),
		linear-gradient(90deg, rgba(255, 128, 255, 0.7), rgba(255, 128, 255, 0.2) 50%),
		rgba(255, 255, 255, 1);
}

.yelly
{
	background:
		
		linear-gradient(180deg, rgba(255, 255, 128, 0.7), rgba(255, 255, 128, 0.2) 50%),
		linear-gradient(90deg, rgba(255, 255, 128, 0.7), rgba(255, 255, 128, 0.2) 50%),
		rgba(255, 255, 255, 1);
}


.turqy
{
	background:
		linear-gradient(180deg, rgba(128, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 50%),
		linear-gradient(90deg, rgba(128, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 50%),
		rgba(255, 255, 255, 1);
}

.blocke
{	
	border-radius : 5px;
	
	border-width : 1px;
	border-color : rgba(255, 255, 255, 0.9);
	border-style : solid;
	
	box-shadow : 0 0 5px rgba(0, 0, 0, 0.3);
}

.pattern1
{
	background:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAF0lEQVQImWNgYGBgePbs2X8GGEDhwAAAv9AHYx0omsYAAAAASUVORK5CYII=);
}

/* CONTAINERS */

div.dheadercontainer
{
	display : block;
	
	width : 90%;
	height : 150px;
	
	min-width : 800px;
	
	margin : auto;
	margin-top : 10px;
}

div.dcontentcontainer
{
	display : block;
	
	width : 90%;
	height : auto;
	
	min-width : 800px;
	min-height : 600px;
	
	margin : auto;
	margin-top : 10px;
	margin-bottom : 10px;
}

/* HEADER */

div.dheaderlogin {
	height : 130px;
  margin: 10px;
  overflow: hidden;
}

div.dheaderlogo {
	width : 300px;
	height : 130px;
  margin: 10px;
  float: left;
}

/* CONTENT */

div.dcontentmenu
{
	display : block;
	
	width : auto;
	height : 50px;
	
	margin-left : 10px;
	margin-right : 10px;
	margin-top : 10px;
}

div.dcontentcontent
{
	display : block;
	
	width : auto;
	height : auto;
	
	min-height : 520px;
	
	margin-left : 10px;
	margin-top : 10px;
	margin-right : 10px;
	margin-bottom : 10px;
}