JSFiddle - React, Tailwind, and code Playground

by VIvek Vaishnav

HTML

<html>
<head>
<title>Horizontal Menu</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>

CSS

nav {
width: 100%;
height: 50px;
}
nav ul {
  float:right;
 list-style-type: none;
 padding: 0;
 margin: 0;
}
nav ul li a {
 display: block;
 color: #000;
 padding: 15px;
 text-decoration: none;
 text-align: center;
}
nav ul li a:hover {
 background-color: #2c4584;
 color: #fff;
}
nav ul li {
 float: left;
}