JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="my-parts">
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">お知らせ</a></li>
		<li><a href="#">ブログ</a></li>
		<li><a href="#">当サイトについて</a></li>
		<li><a href="#">お問い合わせ</a></li>
	</ul>
</nav>

CSS

.my-parts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.my-parts ul::after {
	content: "";
	display: block;
	clear: both;
}
.my-parts ul li {
	float: left;
	border-left: 1px solid rgba(0,0,0,.1);
}
.my-parts ul li:first-child {
	border-left: none;
}
.my-parts ul li a {
	display: block;
	padding: .4em .8em;
	text-decoration: none;
	color: #333;
	background: #fff;
	text-align: center;
}
.my-parts ul li a:hover {
	background: #eee;
}