JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="dark">
    
    <ul id="tabs" class="nav nav-tabs">
      <li class="active">
          <a href="#" title="comments">Comments <span class="label">5</span></a>
      </li>
      <li><a href="#" title="bugs">Bugs <span class="label">5</span></a></li>
      <li><a href="#" title="features">Features <span class="label">5</span></a></li>
      <li><a href="#" title="questions">Questions <span class="label">5</span></a></li>
    </ul>
    
    <div class="panels">
        
        <div class="panel active" id="comments">
            <textarea placeholder="Leave a comment"></textarea>
            <div class="post-controls clearfix">
                <div class="with"></div>
                <a href="#" class="btn btn-loft pull-right">Post</a>
            </div>
        </div>
        
        <div class="panel" id="bugs">Bugs</div>
        
        <div class="panel" id="features">Features</div>
        
        <div class="panel" id="questions">Questions</div>
        
    </div>
    
</div>

CSS

body{
    padding:10px;
    background:#eee;
}


#tabs{
    font-size:0px;
    display:block;
    margin:0;
}
#tabs li{
    font-size:14px;
    width:25%;
}


.dark #tabs li{
    background-color: #4b5157;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4b5157), to(#272B2F));
    background-image: -webkit-linear-gradient(top, #4b5157, #272B2F);
    background-image:    -moz-linear-gradient(top, #4b5157, #272B2F);
    background-image:      -o-linear-gradient(top, #4b5157, #272B2F);
    background-image:         linear-gradient(to bottom, #4b5157, #272B2F);
    border-left:1px solid rgba(0,0,0,0.1);
    border-right:1px solid rgba(255,255,255,0.1);
    
    -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
    
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}
.dark #tabs li a{
    border:none;
    color:#999;
    text-shadow:0 1px 0 #000;
    text-align:center;
    
  -webkit-transition: all 0.2s linear; 
     -moz-transition: all 0.2s linear; 
       -o-transition: all 0.2s linear; 
          transition: all 0.2s linear; 
}
.dark #tabs li .label{
    position: relative;
    color:#999;
    left: 5px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px black inset;
    -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
    }
.dark #tabs li.active .label{
    box-shadow: 0 1px 2px black, 0 -1px 0 rgba(255, 255, 255, 0.2);
    background: transparent;
}
.dark #tabs li.active{
    -webkit-box-shadow:0 0 10px #000 inset;
    -moz-box-shadow:0 0 10px #000 inset;
    box-shadow:0 0 10px #000 inset;
}
.dark #tabs li.active a, .dark #tabs li:hover a{
    color:#fff;
    text-shadow:0...

JavaScript

$(document).on('click', '#tabs a', function(e){
    e.preventDefault();
    var p = this.title;
    console.log(p);
    $('#tabs .active, .panels .active').removeClass('active');
    $(this).parent().addClass('active');
    
    $('.panels #'+p).addClass('active');
});

$('textarea').on('focus', function(){
    $('#comments').addClass('open');
});