JSFiddle - React, Tailwind, and code Playground

HTML

<div id="links">
	<a href="#" id="link1"class="separate_link"><p>General Information</p></a>
	<a href="#" id="link2"class="separate_link"><p>Officials</p></a>
	<a href="#" id="link3"class="separate_link"><p>Achievements</p></a>
</div>

<div class="gen_info">
    <div id="listofgeninfo">
		<ul>
            <li><a href="index.html#finli">History</a></li>
            <li><a href="index.html#finhistory">About</a></li>
            <li><a href="index.html#finmarh">Information</a></li>
            <li><a href="index.html#finhi">Location</a></li>
		</ul>
</div>

CSS

#links{
	position:relative;
	margin:10px 0px 0px 0px;
	width:100%;
	left:9%;
    background-color:blue;
	}
#links:after {
    clear: both;
    content: '';
    display: block;
}
a.separate_link{
	float:left;
	width:10%;
	height:20%;
	padding: 0px;
	border-radius: 100px;
	margin:0px 10px 0px 10px;
	background-color:#ffffff;
	text-decoration:none;
	text-align:center;
	text-bottom:20px;
	color:#000000;
	font-size:50%;
	}
div.gen_info{
	background-color:yellow;
	padding:12px;
	color:#5E6063
}