JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<script src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
adaagag
</div>
<div class="tab-pane fade" id="profile">
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at...
CSS
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:hidden; background:#333;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
JavaScript
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
advanced:{
updateOnContentResize: true
}
});
});
})(jQuery);