JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<div class="menu">
    <div class="menu-piece left"></div>
    <div class="menu-piece center">
        <a href="#coallesce">Coallesce</a>
    </div>
    <div class="menu-piece right"></div>
</div>

CSS

body {
  padding: 10px;
}

.menu-piece {
  height: 50px;
  background: blue;
  float: left;
}

.menu-piece.left {
   width: 30px;
   -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
}

.menu-piece.center { 
  width: 400px;
  background: red;
  margin: 0 -15px 0 -15px;
  padding: 0 15px 0 15px;
}

.menu-piece.center a {
  padding: 15px;
  color: white;
}

.menu-piece.right {
   width: 30px;
   -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}