JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar_frame">aaaa</div>
		<div class="header_bar">
			<div class="header_content">
			<div class="title">
				<li><a href=""><b>Farm</b></a></li>
			</div>
				<li><a href="">New farm</a></li>
				<li><a href="">aaaa</a></li>
				<li><a href="">aaaa</a></li>
			</div>
		</div>

CSS

body
{
	padding: 0px;
	margin: 0px;
	background-color: #ABA49F;
	font-family: Verdana, Geneva, sans-serif
}

.header_bar
{
	width: 100%;
	height: 45px;
	z-index: 1000 !important;
	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
	height: 22px;
	padding: 7px 0px;
	background-image: linear-gradient(to top, #212121 9%, #181818 100%);
	border-bottom: 2px solid #606060;
}

.header_content
{
	width: 50%;
	margin: left;
}

.header_content li
{
	list-style: none;
	float: left;
	font-size: 15px;
}

.title li a
{
	color: #ffc900 !important;
}

.header_content li a
{
	text-decoration: none;
	color: white;
	margin-right: 30px;
}

.header_content a:hover
{
	color: #ffc900;
}

.sidebar_frame
{
	z-index: -1;
	position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}