JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="nav">
  <div class="center">
    <a href="https://scratch.mit.edu" class="navLink">
      <img src="https://cdn.scratch.mit.edu/scratchr2/static/__2e66d579e9ef210e4db0a27018af2342__/images/logo_sm.png" alt="Scratch">
    </a>
    <a href="https://scratch.mit.edu/projects/editor/" class="navLink">Create</a>
    <a href="https://scratch.mit.edu/explore/projects/all/" class="navLink">Explore</a>
    <a href="https://scratch.mit.edu/discuss/" class="navLink">Discuss</a>
    <a href="https://scratch.mit.edu/about/" class="navLink">About</a>
    <a href="https://scratch.mit.edu/help/" class="navLink">Help</a>
    <form class="search" action="https://scratch.mit.edu/search/projects" method="get">
      <input id="search-glass" type="submit" class="glass" value="">
      <input id="search-input" type="text" placeholder="Search" name="q">
    </form>
    <a href="#" class="navLink" id="nav-register">Join Scratch</a>
    <a href="#" class="navLink" id="nav-login">Sign In</a>
  </div>
</div>

CSS

* {
  box-sizing:border-box;
}
body {
  margin:0;
  font-family:"helvetica neue",arial,sans-serif;
}
#nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:35px;
  background:#0f8bc0;
  overflow:hidden;
  box-shadow:0 1px 1px #ccc;
}
.center {
  margin:0 auto;
  width:942px;
}
#nav .center {
  display:flex;
  align-items:stretch;
}
.navLink {
  display:flex;
  align-items:center;
  display:block;
  line-height:35px;
  color:white;
  text-decoration:none;
  font-size:15px;
  border-right:1px solid #149acb;
  padding:0 15px;
}
.navLink:hover {
  background: #0c6185;
}
.navLink:first-of-type:hover {
  background:transparent;
}
.navLink img {
  margin:5px -8px 5px 0;
}
#nav .search {
  border-right:1px solid #149acb;
  padding-right:8px;
  padding-left:4px;
}
#search-glass {
  background: url(https://cdn.scratch.mit.edu/scratchr2/static/__2e66d579e9ef210e4db0a27018af2342__/images/nav-search-glass.png) no-repeat 9px center;
  border:none;
  width:29px;
  height:22px;
  position:relative;
  top:6px;
  left:4px;
  border-right:1px solid #ddd;
}
#search-input {
  margin-top:6px;
  margin-left:-29px;
  height:22px;
  border:none;
  outline:none;
  border-radius:999px;
  padding-left:33px;
}
#nav-register:hover {
  background:#f9a739;
}
#nav-register, #nav-login {
  font-weight:bold;
}