JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li class="skewed"><a href="">text</a></li>
    <li class="skewed"><a href="">text</a></li>
    <li class="skewed"><a href="">text</a></li>
    <li class="skewed"><a href="">text</a></li>
  </ul>
</nav>

SCSS

nav{
  margin: 100px auto;
  text-align: center;
  ul{
    list-style-type: none;
    margin: 0;
   li{
      display: inline-block;
      width: 70px;
      height: 75px;
      background: gray;
      transform: skew(30deg);
      border-left: 2px solid black;
      margin: -2px;
      &:last-child{
        border-right: 2px solid black;
      }
     a{
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        transform: skew(-30deg);
      }
    } 
  }
}