gistfile1.html

Hi. With the vertical tabs are not all so is simple.
You will need depending on the length of words set the height of the indentation from the links.

To begin open the file style.css.
Look for the section / * TABS VERTICAL (NEWS, COMMENTS) * / and replace it with the following code:

  /* TABS VERTICAL (NEWS, COMMENTS) */
	.tab-vertical {
		border-bottom: 0px;
		width:30px;
	}
	.tab-vertical li{
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(270deg);
		-o-transform: rotate(180deg);
		height:100px;
		width:30px;
	}
	.tab-vertical-content {
		margin-left:100px;
	}		
	#tab-container
	{
		float: left;
		width: 66px;
	}
	#tab-container ul
	{
		list-style: none;
		text-align: center;
		margin-top:1px;
	}
	#tab-container ul li
	{
		border: 1px solid #cacaca;
		font-size:14px;
		color:#161616;
		font-weight:bold;
		background: #fefefe; /* Old browsers */
		background: -moz-linear-gradient(top, #fefefe 0%, #f3f3f3 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #fefefe 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #fefefe 0%,#f3f3f3 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #fefefe 0%,#f3f3f3 100%); /* IE10+ */
		background: linear-gradient(to bottom, #fefefe 0%,#f3f3f3 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
		width:40px;

		padding-top:10px;
		padding-bottom:10px;
		margin-top:-1px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	
	}
	#tab-container ul li a {
		color:#161616;
		width:45px;
		display:block;
		-moz-transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		 writing-mode: tb-rl;
		 margin-left:10px;
		 height:50px;
	}
	#tab-container ul li a:hover {
		text-decoration:none;
	}
	
	#tab-container ul li.active {	
		width:43px;
		margin-left:-3px;
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* IE10+ */
		background: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		border-right:1px solid #fff;
	}
	#main-container {
		min-height:200px;
		margin: 0 0 0 0px;
		padding: 20px;
		border:1px solid #cacaca;
		-webkit-border-radius: 3px;
		-webkit-border-top-left-radius: 0;
		-moz-border-radius: 3px;
		-moz-border-radius-topleft: 0;
		border-radius: 3px;
		border-top-left-radius: 0;
		background:#fff;
	}
  div.min-height-tabs {
  	min-height:250px;
	}
	a.t_item1 {
		margin-top:37px;
	}
	a.t_item2 {
		margin-top:30px;
	}
	a.t_item3 {
		margin-top:40px;
	}
	a.t_item4 {
		margin-top:0;
	}
	a.t_item5 {
		margin-top:0;
	}


Next you need to add code tabs to the HTML file.
It looks as follows:
        <div id="tab-container">
      	<ul>
    		  <li class="active"><a href="#tab1" class="t_item3" data-toggle="tab">Tabshahaha</a></li>
              <li style=""><a href="#tab2" class="t_item4" data-toggle="tab">Tabs 2</a></li>
              <li style=""><a href="#tab2" class="t_item5" data-toggle="tab">Tabs 3</a></li>
    		</ul>
    	  </div>
        
        <div id="main-container"  class="tab-content min-height-tabs shadow">
              <div class="tab-pane fade in active tab-overflow-main" id="tab1">
               text tab 1
              </div>
               <div class="tab-pane tab-overflow-main" id="tab2">
                text tab 2
               </div>
               <div class="tab-pane tab-overflow-main" id="tab3">
                text tab 3
               </div>
         </div>
         

Now you need depending on the length of the word specify the offset in classes t_item3, t_item4, t_item5 and so on.
The minimum height of the tab content is specified in the class min-height-tabs.