JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	<body>
		<div id="watches" class="someArea">
			<?include 'include/watches.inc.php';?>
		</div>
		<div id="head" class="someArea">
			<?include 'include/head.inc.php';?>
		</div>
		<div id="menuBar" class="someArea middle">
			<?include 'include/menu.inc.php';?>
		</div>
		<div id="contentArea" class="someArea middle">
			<?include 'include/content.inc.php';?>
		</div>
	</body>

CSS

.someArea{
		opacity:0.90;
		background-color:#1d1d1d;
		position:absolute;
	}
	.middle {
		height:800px;
		top:400px;
	}
	#watches{
		position:absolute;
		top:25px;
		height:100px;
		width:300px;
	}
	#head {
		top:175px;
		height:200px;
		width:1280px;
	}
	#menuBar{
		width:400px;
	}
	#contentArea{
		width:865px;
		left:425px;
	}

JavaScript

var a=document.getElementsByClassName("someArea");
for(var i=0;i<a.length;i++){
	a[i].style.left=(a[i].style.left+100+"px");
}