JSFiddle - React, Tailwind, and code Playground

by chetfarley

HTML

<div class="tab-wrap">
    <div class="tab active">
        <a href="#">Performance Scores</a>
    </div>
    <div class="tab disabled">
        <a href="#">Routing Tiers</a>
    </div>
</div>
    
<br style="clear:left;" />
<br /><br />

<div class="tab-wrap">
    <div class="tab">
        <a href="#">Performance Scores</a>
    </div>
    <div class="tab active">
        <a href="#">Routing Tiers</a>
    </div>
</div>

CSS

.tab {
    display:inline-block;
    float:left;
    width:50%;
}
.tab a {
    display:block;
    position:relative;
    color:#333;
    text-decoration:none;
    text-align:center;
    padding:1em 0;
    border-top:1px solid #ddd;
    background: #D6D6D6;
}
.tab a:hover {
    background:#aaa;
    color:#000;
}

.active a {
    color:#000;
    pointer-events: none;
    cursor: default;
    background: #fff;
}

.disabled a {
    background:#E3E3E3;
    color:#888;
    pointer-events: none;
    cursor: default;
}

.tab-wrap .tab a:after, .tab-wrap .tab a:before {
    border-style: solid;
    content: "";
    display: block;
    position: absolute;
    z-index:999;
}

.tab-wrap .tab a:after {
    border-color: transparent transparent transparent #D6D6D6;
    border-width: 26px;
    right: -51px;
    top: 0px;
}

.tab-wrap .tab a:before {
    border-color: transparent transparent transparent #888;
    border-width: 26px;
    right: -52px;
    top: 0px;
    z-index:998;
}

.tab-wrap .tab:hover a:after {
    border-color: transparent transparent transparent #aaa;
}

.tab-wrap .active a:after, .tab-wrap .active:hover a:after {
    border-color: transparent transparent transparent #fff;
}

.tab-wrap .tab:last-child a:after, .tab-wrap .tab:last-child a:before {
    border:none;
}