JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <ul>
        <li class="active" data-tab="1">Pizza</li>
        <li data-tab="2">Chicken Noodle Soup</li>
        <li data-tab="3">Peanut Butter</li>
        <li data-tab="4">Fish</li>
    </ul>
</div>

SCSS

* {
    font-size:16px;
}
.tabs {
    max-width: 1010px;
    width:100%;
    height: 5rem;
    border-bottom:solid 1px grey;
    margin:0 0 0 6.5rem;
    display: table;
    table-layout:fixed;
    ul {
        margin:0;
        display: flex;
        flex-direction: row;
        li {
            flex-grow:1;
            flex-basis: 0;
            list-style:none;
            text-align:center;
            font-size:1.313rem;
            background: blue;
            color: white;
            height: inherit;
            left:auto;
            vertical-align:top;
            text-align:left;
            padding:20px 20px 20px 70px;
            border-top-left-radius: 20px;
            border:solid 1px blue;
            cursor:pointer;
            &.active {
                background: white;
                color: blue;
            }
            &:before {
                content:"";
            }
        }
    }
}