JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
    <title>Bouncy</title>
  </head>

  <body>
    <header id="header">
      <div class="main">
        <img class="logo" src="https://via.placeholder.com/112x19.png/09f/fff?text=logo" width="112" height="19" />
        <nav class="menu">
          <ul>
            <li><a href="#header">Hello</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>

          </ul>
        </nav>

      </div>
    </header>

  </body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Open sans", sans-serif;
}

header {
  background-image: url(https://source.unsplash.com/E1GqYJFnXoU/600x600);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  color: #ffffff;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.logo {
  max-width: 100%;
  height: auto;
  padding-top: 47px;
  padding-left: 98px;
}

nav {}

.menu ul {
  display: flex;
  padding-right: 99px;
  padding-top: 48px;
  list-style-type: none;
}

.menu li {
  margin-left: 15px;
}

.menu a {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  padding: 5px;
  border: 1px solid transparent;
}

.menu a:hover {
  color: #ff0000;
}

.menu a:focus {
  border: 1px solid #ffffff;
  border-radius: 30px;
  color: #ffffff;
}

.menu a:active {
  color: #ffffff;
}