JSFiddle - React, Tailwind, and code Playground

by Krzysztof Jedraszewski

HTML

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-pills just">
  <li class="active"><a data-toggle="tab" href="#page1">Page 1</a></li>
  <li><a data-toggle="tab" href="#page2">Page 2</a></li>
  <li><a data-toggle="tab" href="#page3">Page 3</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
  <li class="active"><a data-toggle="tab" href="#page1">Page 1</a></li>
  <li><a data-toggle="tab" href="#page2">Page 2</a></li>
  <li><a data-toggle="tab" href="#page3">Page 3</a></li>
</ul>

CSS

.just {
      display: flex;
      flex-flow: row nowrap;
    }
    
    .just > li {
      flex: 1 auto;
      text-align: center;
      white-space: nowrap;
    }