JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='tabbed'>
        <li class='tab'>Menu 1</li>
        <li class='tab'>Menu 2</li>
        <li class='tab'>Menu 3</li>
        <li class='tab'>Menu 4</li>
        <li class='tab'>Menu 5</li>
        <li>
        <ul>
        <li class='dummy'>Content 1</li>
        <li class='dummy'>Content 2</li>
        <li class='dummy'>Content 3</li>
        <li class='dummy'>Content 4</li>
        <li class='dummy'>Content 5</li>
        </ul>
        </li>
    </ul>

CSS

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
height: 550px; }

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }

.tabbed li:last-child {
   clear: left; 
}