JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Standard whitespace -->
<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
</nav>

<!-- No whitespace -->
<nav><a href="#">Link 1</a><a href="#">Link 1</a><a href="#">Link 1</a></nav>

<!-- Crazy whitespace -->
<nav>
  
  
  

  <a href="#">Link 1</a>
          
          
          
          
          
                
                
                  <a href="#">Link 1</a>
  
  
  <a
  
  href="#"
  
  
  >Link
  
  
  
  1</a
  
  
  
  
  
  
  
  
  >
  
  
</nav>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

nav {
  display: flex;
  background: black;
  padding: 1em;
}

nav:not(:first-child) {
  margin-top: 2em;
}

nav a {
  color: white;
  margin-right: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  text-decoration: none;
}

nav a:hover, nav a:focus, nav:active {
  background: white;
  color: black;
}