JSFiddle - React, Tailwind, and code Playground

by Kiwoong Jang

HTML

<ul id="navi">
    <li><span class="navi-arrow"></span>
        <a href="#">HOME</a>
    </li>
    <li><a href="#">My Website</a></li>
</ul>

CSS

ul, li { margin: 0; padding: 0; list-style: none; }

#navi { zoom: 1; overflow: hidden; }
#navi li { float: left; height: 36px; line-height: 0; overflow: hidden; }
#navi a { display: block; height: 36px; padding: 0 25px; line-height: 36px; text-align: center; background: #cacaca; }
#navi li:first-child a { float: left; background: #ef5123; }

span.navi-arrow {
    float: left;
    display: block; width: 0; height: 0;
    border-color: #fff #ef5123 #fff #fff;
    border-style: solid;
    border-width: 18px 25px 18px 0;
}