JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<header>
	<div class="logo">
		<p>LOGO </p>
	</div>
	<nav>
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">WEAPONS</a></li>
			<li><a href="">FAUNA</a></li>
			<li><a href="">CHARACTERS</a></li>
		</ul>
	</nav>
</header>

CSS

header{
  text-align: center;
  padding: 2rem 0;
  background: pink;
  display: flex;
}

  nav {
    flex: 1 1;
  }

    nav ul{
      list-style: none;
      display: flex;
      justify-content: center;
      background: grey;
      padding: 0;
    }

      nav li{
        margin: 0 1rem;
        flex: 1 1;
      }

        nav a{
          text-decoration: none;
        }