JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<ul>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>
</div>

CSS

.container {
	text-align: center;
	border: 1px solid green;
}
.container ul {
	border: 2px solid red;
	display: inline-block;
	margin: 10px 0;
	padding: 10px 25px;
  background: green;
 
}
.container li {
  width: 100px;
	display: inline-block;
  background: yellow;
}
.container li a {
	display: inline-block;
	background: #444;
	color: #FFF;
	padding: 5px;
	text-decoration: none;
}