JSFiddle - React, Tailwind, and code Playground

HTML

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>

CSS

#feature-tabs {
    height: 16px;
    width: 150px;
}

ul#tabs {
     list-style-type: none; 
     margin: 0 0 2 0; 
}
ul#tabs li {
    float: left;
    width: 200px;
}
ul#tabs li a {
    color: #42454a; 
    background-color: #dedbde; 
    border: 1px solid #c9c3ba; 
    border-bottom: none; 
    text-decoration: none;
    width: 150px;
}
ul#tabs li a:hover {
    background-color: #f1f0ee;
}
ul#tabs li a.selected {
    color: #000; 
    background-color: #f1f0ee; 
    font-weight: bold;
}