JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Your Website!</title>
  <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
  <img id="logo" url(../images/Your_Logo.png) />
</head>

<body>
  <div class="container">
    <nav>
      <ul><a href="#">HOME</a>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Why Us</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</body>

</html>

CSS

@charset "UTF-8";
 body {
  background-image: url(../images/home.jpg);
  background-repeat: no-repeat;
  height: 100%;
}
* {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 1000px;
  height: 100%;
  margin: 0px auto;
}
nav ul a {
  color: white;
}
nav ul {
  width: 100px;
  height: 30px;
  margin: 270px 460px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  text-align: center;
  color: white;
  border-radius: 20px;
}
nav ul li {
  width: 100px;
  height: 30px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  margin-top: 5px;
  position: relative;
  top: 17px;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  text-align: center;
  color: white;
  border-radius: 20px;
}
nav ul:hover li {
  opacity: 1;
}
nav ul li:hover a {
  border-bottom: 2px solid white;
}
li:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}
ul:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}