JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tabs">
<div class="gwt-HTML tab">1</div>
<div class="gwt-HTML tab">2</div>
<div class="gwt-HTML tab">3</div>
<div class="gwt-HTML tab">4</div>
<div class="gwt-HTML tab">5</div>
</div>
CSS
body {
width: 300px;
}
.tabs {
width: 100%;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
box-sizing: border-box;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
min-width: 50%;
box-sizing: border-box;
flex: 1 1 0;
-webkit-flex: 1 1 0;
text-align: center;
}