JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<ul>
    <li class="active">
        <a>This is a Tab</a>
    </li>
    <li>
        <a>This is a Tab</a>
    </li>
</ul>

SCSS

@mixin br {
    border-top-left-radius:10px;
    border-top-right-radius:50px 80px;
    //border-bottom-right-radius:8px 2px;
}
body {
    margin:2em;
}
ul {
    border-bottom:7px solid #578fc9;
    padding-left:1em;
}
li {
    @include br;
    margin-left:-0.5em;
    font-family:sans-serif;
    display:inline-block;
    border:1px solid darkgrey;
    border-bottom:none;
    position:relative;
    a {
        @include br;
        display:block;
        padding:0.5em 2em;
        background-color:lightgrey;
        color:darkgrey;
    }
    &.active {
        z-index:1;
        border-color:transparent;
        a {
            background-color:#578fc9;
            color:white;
        }
    }
}