JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="slant">
    <li>
        <a href="slanty.html?current=one" class="selected"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Home</em><span></span></a>
    </li>
    <li>
        <a href="slanty.html?current=two"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>News</em><span></span></a>
    </li>
    <li>
        <a href="slanty.html?current=three"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>About</em><span></span></a>
    </li>
    <li>
        <a href="slanty.html?current=four"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Work</em><span></span></a>
    </li>
    <li>
        <a href="slanty.html?current=five"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>A longer menu item</em><span></span></a>
    </li>
    <li>
        <a href="slanty.html?current=six"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Contact</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a>
    </li>
</ul>

CSS

#slant {padding: 0; margin: 50px 0 20px 20px; list-style: none;}
#slant li {float: left; text-align: center; margin-right: -20px;} 
#slant a {display: block; text-decoration: none;}
#slant a em {font-style: normal; display: block; padding: 0 15px; height: 25px; background: #BBBBBB; float: left; cursor: pointer; color: #000000; line-height: 24px; font-weight: bold;}

#slant a b, a span {cursor: pointer; display: block; width: 0; overflow: hidden; float: left; background: #BBBBBB;}

#slant a span {height: 0; border-top: 25px solid #BBBBBB; border-right: 25px solid #FFFFFF;}

#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top: 5px solid #FFFFFF; border-right: 5px solid #BBBBBB;}

#slant a b.p1 {height: 0; margin-top: 20px;}
#slant a b.p2 {height: 5px; margin-top: 15px;}
#slant a b.p3 {height: 10px; margin-top: 10px;}
#slant a b.p4 {height: 15px; margin-top: 5px;}
#slant a b.p5 {height: 20px;}

#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom: 5px solid #FFFFFF; border-left: 5px solid #BBBBBB;}

#slant a b.p6 {height: 20px;}
#slant a b.p7 {height: 15px;}
#slant a b.p8 {height: 10px;}
#slant a b.p9 {height: 5px;}
#slant a b.p10 {height: 0;}

#slant a:hover {background: #AAAAAA;}
#slant a:hover em {background: #AAAAAA;}
#slant a:hover b.p1,
#slant a:hover b.p2,
#slant a:hover b.p3,
#slant a:hover b.p4,
#slant a:hover b.p5 {border-right-color: #AAAAAA; background: #AAAAAA;}
#slant a:hover b.p6,
#slant a:hover b.p7,
#slant a:hover b.p8,
#slant a:hover b.p9,
#slant a:hover b.p10 {border-left-color: #AAAAAA; background: #AAAAAA;}
#slant a:hover span {border-top-color: #AAAAAA;}

#slant a.selected em {color: #FFFFFF; background: #000000;}
#slant a.selected b.p1,
#slant a.selected b.p2,
#slant a.selected b.p3,
#slant a.selected b.p4,
#slant a.selected b.p5 {border-right-color: #000000; background: #000000;}
#slant a.selected b.p6,
#slant a.selected b.p7,
#slant a.selected b.p8,
#slant a.selected...