JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="header">
        <h4 class="title">Header</h4>
        <p class="category">Some tagline here</p>
      </div>
      <div class="content content-full-width">
        <ul role="tablist" class="nav nav-tabs">
          <li role="presentation" class="active">
            <a href="#us" data-toggle="tab" aria-expanded="true">USA</a>
          </li>
          <li class="">
            <a href="#uk" data-toggle="tab" aria-expanded="false">UK</a>
          </li>
          <li class="">
            <a href="#au" data-toggle="tab" aria-expanded="false">AU</a>
          </li>
          <li class="">
            <a href="#ca" data-toggle="tab" aria-expanded="false">CA</a>
          </li>
          <li class="">
            <a href="#nz" data-toggle="tab" aria-expanded="false">NZ</a>
          </li>
        </ul>
        <div class="tab-content">
          </br>
          <div id="us" class="tab-pane active">
            - Content Here -
          </div>
          <div id="uk" class="tab-pane">
            - Content Here -
          </div>
          <div id="au" class="tab-pane">
            - Content Here -
          </div>
          <div id="ca" class="tab-pane">
            - Content Here -
          </div>
          <div id="nz" class="tab-pane">
            - Content Here s-
          </div>
        </div>
      </div>
    </div>
  </div>
</div>