JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tab.js"></script>
<div class="span5 news">
  <div class="row">
    <h2 class="pull-left">Heading</h2>
    <ul class="nav nav-pills pull-right">
      <li class="active">
        <a href="#tab-1">1</a>
      </li>
      <li class="">
        <a href="#tab-2">2</a>
      </li>
    </ul>
  </div>
  <div class="row tab-content">
    <div class="tab-pane active" id="tab-1" data-toggle="tab">
        1
      <p>
        <span class="label">Test 1</span>
         Some Text
            
        <a class="act act-primary" href="http://somewhere.com" >a link</a>
      </p>
    </div>
  </div>
  <!--/row-->
  <div class="row tab-content">
    <div class="tab-pane" id="tab-2" data-toggle="tab">
        2
      <p>
        <span class="label">Test 2</span>
         Some Text
            
        <a class="act act-primary" href="http://somewhere.com" >another link</a>
      </p>
    </div>
  </div>
  <!--/row-->
</div>

CSS

.tab-content > .tab-pane, .pill-content > .pill-pane { 
display: none;
}
.tab-content > .active, .pill-content > .active { 
display: block;
}

JavaScript

$(document).ready(function() {
    jQuery('.nav-pills a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });