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: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #bbb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(100%,#bbb));
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#bbb 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0%,#bbb 100%);
    background: linear-gradient(to bottom, #e2e2e2 0%,#bbb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#bbbbbb',GradientType=0 );
}
.tab a:hover {
    background:#ddd;
    color:#000;
}

.active a {
    color:#000;
    pointer-events: none;
    cursor: default;
    background: #e4e4e4;
    background: -moz-linear-gradient(top, #e4e4e4 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #e4e4e4 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #e4e4e4 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #e4e4e4 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#ffffff',GradientType=0 );
}

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

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

.tab-wrap div:first-child a:after {
    border-color: transparent transparent transparent #bbb;
    border-width: 27px;
    right: -53px;
    top: -1px;
}