JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
<html>
        <head>
                <title>Test</title>
                <link href="win.css" rel="stylesheet" type="text/css" />
        </head>
        <body>

                <header id="top-section">

                        <div class="container">

                                <div class="navBar">

                                        <ul>
                                                <li>
                                                        <nav class="navBox">

                                                                <div class="box"> </div>

                                                                <div class="rotate270">
                                                                        <div class="left-chevron"> </div>
                                                                        <div class="selectedTab"> </div>
                                                                </div>
                                                                <div class="rotate90">
                                                                        <div class="right-chevron"> </div>
                                                                </div>

                                                        </nav>
                                                </li>
                                                
                                                <li>
                                                        <nav class="navBox">

                                                                <div class="box"> </div>

                                                                <div class="rotate270">
                                                                        <div class="left-chevron"> </div>
                                                                       ...

CSS

.container {
    margin:0 auto; width:1080px; position: relative; height: 80px;
}

.navBar {
  display: block;
  position: relative;
  width: 900px;
  height: 100px;
}

.navBox {
  width: 190px;
  height: 84px;
  left: 24px;
  position:relative; 
  padding: 2px;
}

.wrap {
  clear: both;
  height: 80px;
}

#top-section { background-color:#333; color:#fff; margin-bottom: 15px; padding: 15px 0}
#top-section a {color:#fff; text-decoration:none}
#top-section h1 {font-size: 2.5em;color:#fff;margin:0}

.selectedTab {
    position: absolute;
    left: -39px;
    top: 60px;
    width: 0;
    height: 0;
    border-top: 25px solid #D66C00;
    border-left: 15px solid transparent;  
    border-right: 15px solid transparent;
    /* Rotate */
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
}

.left-chevron {
   left: -82px;
    margin-bottom: 6px;
    padding: 12px;
    position: absolute;
    text-align: center;
    top: 157px;
    width: 56px;
}

 .left-chevron:before { 
    content: ''; position: absolute; 
    top: 0; left: 0; 
    height: 100%; width: 51%;
    background: #D66C00; 
    -webkit-transform: skew(0deg, 12deg); 
    -moz-transform: skew(0deg, 12deg);
    -ms-transform: skew(0deg, 12deg); 
    -o-transform: skew(0deg, 12deg); 
    transform: skew(0deg, 12deg); 
} 
  
 .left-chevron:after {

  content: '';
  position: absolute;
  top: 0; right: 0; 
  height: 100%; width: 50%; 
  background: #D66C00;
  -webkit-transform: skew(0deg, -12deg); 
  -moz-transform: skew(0deg, -12deg); 
  -ms-transform: skew(0deg, -12deg); 
  -o-transform: skew(0deg, -12deg); 
  transform: skew(0deg, -12deg);

}

 .right-chevron { 
    margin-bottom: 6px;
    padding: 12px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 24px;
    width: 56px;
}

 .right-chevron:before { 
    content: ''; position: absolute; 
    top: 0; left: 0; 
    height: 100%; width: 51%;
   ...