JSFiddle - React, Tailwind, and code Playground

by albert_rar87

HTML

<div class="main">
    <ol>
        <li>
            <div>One</div>
        </li>
        <li>
            <div>Two</div>
        </li>
        <li>
            <div>Three</div>
        </li>
        <li>
            <div>Four</div>
        </li>
        <li>
            <div>Five</div>
        </li>
    </ol>
</div>

CSS

div.main {
        margin-right:30px;
    }
    ol > li {        
        display: table-cell;
        height: 30px;        
        position: relative;
        padding: 0px;
        margin: 0px;
        text-align: center;
        border: 1px solid #d68a3a;
    }
    ol > li > div {         
        position:relative;        
        line-height: 30px; /* equal to the list item's height */
        height:100%;
        width: 100%;         
    }
    ol>li:hover {
        background-color: #d68a3a;
        cursor: pointer;
        color: white;
    }
    ol {
        display: table;
        width: 100%;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    ol > li > div:after, ol > li > div:before {
        content:"";
        display:inline-block;        
        border-width: 16px;
        border-style: solid;
        width: 0px;
        height: 0px;
        left: 100%;
        top: -1px;        
        position: absolute;        
        z-index: 1;
    }
    ol > li > div:after, ol > li:hover > div:before {
        border-color: transparent transparent transparent #d68a3a;
    }
    ol > li > div:before {
        border-width: 14px;
        display: block;
        border-color: transparent transparent transparent #ffffff;
        z-index: 2;
        top:1px;
    }