JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <div style="width:460px">
      <b>correct</b>
    <ul class="nav nav-pills nav-stacked">
      <li class=""><a href="#tab_1" data-toggle="pill">Introduction <span class=
      "badge pull-right">0/2</span></a></li>
      <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on
      ease of handling of pigs <span class="badge pull-right">0/4</span></a></li>
      <li class=""><a href="#tab_2" data-toggle="pill">Questionnaire <span class=
      "badge pull-right">0/4</span></a></li>
    </ul>
  </div>

  <div style="width:250px">
       <b>correct</b>
    <ul class="nav nav-pills nav-stacked">
      <li class=""><a href="#tab_1" data-toggle="pill">Introduction <span class=
      "badge pull-right">0/2</span></a></li>
      <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on
      ease of handling of pigs <span class="badge pull-right">0/4</span></a></li>
      <li class=""><a href="#tab_2" data-toggle="pill">Questionnaire <span class=
      "badge pull-right">0/4</span></a></li>        
    </ul>
  </div>

  <div style="width:438px">
       <b>not correct</b>
    <ul class="nav nav-pills nav-stacked">
      <li class=""><a href="#tab_1" data-toggle="pill">Introduction <span class=
      "badge pull-right">0/2</span></a></li>
      <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on
      ease of handling of pigs <span class="badge pull-right">0/4</span></a></li>
      <li class=""><a href="#tab_2" data-toggle="pill">Questionnaire <span class=
      "badge pull-right">0/4</span></a></li>        
    </ul>
  </div>