JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
			<a class="page-scroll" href="#red ">
				<div class="red">
					<p>=FIRST-</p>
				</div>
			</a>
			<a class="page-scroll" href="#orange">
				<div class="orange">
					<p>--SECOND--</p>
				</div>
			</a>
			<a class="page-scroll" href="#blue">
				<div class="blue">
					<p>--- THIRDBOX ---</p>
				</div>				
			</a>
</div>

CSS

#container{
	margin-left:100px;
	width:200px;
  right:20px;
}
.three-bars, .red, .orange, .blue {
	color:white;
	height:50px;
	margin:10px;
	padding:10px;
	float:right;
	font-size:20px;
	text-align:right;
	}

.red{
	width:100px;
	background-color:#da3421;

	
}
.orange{
	width:150px;
	background-color:#ec9a4c;
	
}
.blue{
	width:200px;
	background-color:#5ab7c4;
}