JSFiddle - React, Tailwind, and code Playground

by jonese1234

HTML

<body>
  <div class="container">
    <header class="topheader">
      <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">Shop</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </header>
  </div>
</body>

CSS

body{
  background-color: gray;
}

*{
	border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

.container{
	margin-top: 30px;
	margin-left: 7%;
	margin-right: 7%;
	height: 100%;
	border:1px solid blue;
}

.nav{
    border:1px solid #ccc;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
	background-color: #333;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	list-style-position: inside;
	
}

.nav li {
	float:left;
    width: 25%; /* Split width appropriately */
}

.nav a:link, a:visited {
	display:block;
    font-weight: bold;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
	color: white;
}

.nav a:hover {
  background-color: #005f5f;
}