JSFiddle - React, Tailwind, and code Playground

by stupid_genius

HTML

<div id="main">
	<div id="centered">
		<div id="center">&lt;---X---&gt;</div>
		<div id="left">Left</div>
		<div id="right">Right</div>
	</div>
</div>

CSS

html, body{
	margin: 0;
	padding: 0;
}
#main{
	position: absolute;
	width: 100%;
	height: 100%;
	background: lightblue;
}
#centered{
	position: static;
	margin: 0 auto;
	width: 500px;
	background: yellow;
}
#left{
	position: absolute;
	top: 0;
	right: 478px;
	width: 50px;
	background: green;
}
#right{
	position: absolute;
	top: 0;
	left: 477px;
	width: 200px;
	background: red;
}
#center{
	position: static;
	margin: 0 auto;
	width: 100px;
	text-align: center;
	background: gray;
}