JSFiddle - React, Tailwind, and code Playground

HTML

<body id="pageHome">
<ul id="menu">
	<li id ="buttonHome"><a href="index.html">Home</a></li>
	<li><a href="transcriptions.html">Transcriptions</a></li>
	<li><a href="order.html">Order</a></li>
	<li><a href="about.html">Instructions</a></li>
	<li><a href="samples.html">Sample</a></li>					
	<li><a href="transcribe.html">Transcribing</a></li>
	<li><a href="news.html">News</a></li>

CSS

#pageHome #buttonHome>a {
  background: #ccc;
}

ul{
    list-style:none;
}

li{
  float:left;
}

a{
  display: block;
  padding: 20px;
}