JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/css/tether.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
<ul class="list-group nav col-sm-3 col-sm-offset-2 col-xs-12">
  <a class="list-group-item" href="#type1">
    <span class="type-title">Pin</span>
    <span class="pull-right">&raquo;</span>
  </a>
  <a class="list-group-item" href="#type2">
    <span class="type-title">Pon</span>
    <span class="pull-right">&raquo;</span>
  </a>
</ul>
<div class="tab-content">
  <ul id="type1" class="tab-pane list-group col-xs-12 col-sm-5">
    <li class="list-group-item" id="{{ m.pk }}">
      <div class="matos">
        <span class="nom">Hi</span>
      </div>
    </li>
  </ul>
  <ul id="type2" class="tab-pane list-group col-xs-12 col-sm-5">
    <li class="list-group-item" id="{{ m.pk }}">
      <div class="matos">
        <span class="nom">Han</span>
      </div>
    </li>
  </ul>
</div>

JavaScript

$('.nav a').mouseenter(function(e) {
    $(this).tab('show');
  });