Edit in JSFiddle

window.addEventListener('load', function transpileLess(){
	Array.prototype.forEach.call(
  	document.querySelectorAll('head style[type="text/css"]'),
    function(styleElement) {
    	styleElement.setAttribute('type','text/less')
    }
  );
  
  less.env = 'development';
  less.refreshStyles();
});


// Component TabView
(function(namespace){
	
  var Tab = function(){
  	this.selected = false;
  }
  
  Tab.prototype.deselect = function(){
  	this.selected = false;
  }
  
  Tab.prototype.select = function(){
  	this.selected = true;
  }
  
	var ComponentTabView = function(){
  	this.viewModel = {
    	tabs: []
    }
  }
  
  ComponentTabView.prototype.addTab = function(){
  	var newTab = new Tab();
    this.viewModel.tabs.push(newTab);
    return newTab;
  }
  
  ComponentTabView.prototype.selectTab = function(tab){
  	this.deselectAllTabs();
    tab.select();
  }
  
  ComponentTabView.prototype.deselectAllTabs = function(){
    this.viewModel.tabs.map(function(tab){
    	tab.deselect();
    });
  }
  
  namespace.ComponentTabView = ComponentTabView;
}(window));

// Controller (Angular, jQuery, Vanilla, ...)
(function(ComponentTabView){
	
  // jquery usage
    $.fn.tabs = function(options) {
      // default configuration
      var config = $.extend({}, {
        selectorTabTrigger:  '.tabView__tabBar button',
        selectorTabElement:  '.tabView__tabContent__item',
        classNameItemActive: 'tabView__tabContent__item--active'
      }, options);
      
      function Plugin ($element) {
      	var self = this;
        
     		this.$tabTriggers = $(config.selectorTabTrigger, $element);
        this.$tabContainers = $(config.selectorTabElement, $element);
        this.tabComponent = new ComponentTabView();

        this.$tabTriggers.each(function(){
        	this.tab = self.tabComponent.addTab();
        });
        
        $element
        	.on('click', config.selectorTabTrigger, function onTabTriggerClick(){
          	self.selectTab(this.tab);
          })
      }
            
      Plugin.prototype.selectTab = function(tab){
      	var self = this;
        
        this.tabComponent.selectTab(tab);

        // update view
        this.tabComponent.viewModel.tabs.forEach(function(tab, tabIndex){
          var $tabContainer = self.$tabContainers.eq(tabIndex);

          if (tab.selected === true) {
            $tabContainer.addClass(config.classNameItemActive);
          } else {
            $tabContainer.removeClass(config.classNameItemActive);
          }
        });
      }
      
      this.each(function() {
        new Plugin($(this));
      });
      
      return this;
    };
    
    $('.componentTabView[data-framework="jquery"]').tabs();

    // angular usage
    var app = angular.module('app', [])
      .directive('angularComponentTabView', function(){
        return {
          scope: true,
          controllerAs: 'tabsCtrl',
          bindToController: true,
          controller: function(){
            var
              vm           = this,
              tabComponent = new ComponentTabView();

            vm.selectTab = selectTab;
            vm.tabs      = tabComponent.viewModel.tabs;

            this.addTab = function(){
              return tabComponent.addTab();
            };

            function selectTab(tab){
              tabComponent.selectTab(tab);
            }
          }
        }
      })
      .directive('angularComponentTabViewTab', function(){
        return {
          scope: true,
          require: '^^angularComponentTabView',
          controllerAs: 'tabCtrl',
          bindToController: true,
          controller: function(){
            var
              vm       = this,
              tabsCtrl = null;

            vm.tab       = null;
            vm.init      = onInit;
            vm.selectTab = selectTab;

            function onInit(tabs){
              tabsCtrl = tabs;

              vm.tab = tabsCtrl.addTab();
            }

            function selectTab(){
              tabsCtrl.selectTab(vm.tab);
            }
          },
          link: function(scope, element, attrs, controller){
            scope.tabCtrl.init(controller);
          }
        }
      });
}(window.ComponentTabView))
<section>
  <aside>
    sidebar 
    
    <div class="form-checkbox">
      <input type="checkbox" id="check1" />
      <label for="check1">some label</label>
    </div>
    
    <div class="form-checkbox">
      <input type="checkbox" id="check2" />
      <label for="check2">some label lorem ipsum dolor sit amer del lorem</label>
    </div>
    
  </aside>
  <main>
    <div class="componentResultRow">
      <div class="row">
        <div class="col">
          col1
        </div>
        <div class="col">
          col2
        </div>
        <div class="col">
          col3
        </div>
      </div>
      
      <div class="componentTabView" data-framework="jquery">
        <div class="tabView__tabBar">
          <div class="row">
            <button class="col">
              tab1
            </button>
            <button class="col">
              tab2
            </button>
            <button class="col">
              tab3
            </button>
          </div>
        </div>
        
        <div class="tabView__tabContents">
          <div class="tabView__tabContent__item">
            content1
          </div>
          <div class="tabView__tabContent__item">
            content2
          </div>
          <div class="tabView__tabContent__item">
            content3
          </div>
        </div>
      </div>
      <!-- tabview jquery end -->
      
      <div class="componentTabView" data-framework="jquery">
        <div class="tabView__tabBar">
          <div class="row">
            <button class="col">
              tab1
            </button>
            <button class="col">
              tab2
            </button>
            <button class="col">
              tab3
            </button>
          </div>
        </div>
        
        <div class="tabView__tabContents">
          <div class="tabView__tabContent__item">
            content1
          </div>
          <div class="tabView__tabContent__item">
            content2
          </div>
          <div class="tabView__tabContent__item">
            content3
          </div>
        </div>
      </div>
      <!-- tabview jquery end -->
      
      <div ng-app="app" class="componentTabView" angular-component-tab-view>
        <div class="tabView__tabBar">
          <div class="row">
            <button class="col" 
              angular-component-tab-view-tab
              ng-click="tabCtrl.selectTab()">
              tab1
            </button>
            <button class="col" 
              angular-component-tab-view-tab
              ng-click="tabCtrl.selectTab()">
              tab2
            </button>
            <button class="col"
              angular-component-tab-view-tab
              ng-click="tabCtrl.selectTab()">
              tab3
            </button>
          </div>
        </div>
        
        <div class="tabView__tabContents">
          <div class="tabView__tabContent__item" 
            angular-component-tab-view-content
            ng-class="{'tabView__tabContent__item--active': tabsCtrl.tabs[0].selected}">
            content1
          </div>
          <div class="tabView__tabContent__item" 
            angular-component-tab-view-content
            ng-class="{'tabView__tabContent__item--active': tabsCtrl.tabs[1].selected}">
            content2
          </div>
          <div class="tabView__tabContent__item" 
            angular-component-tab-view-content
            ng-class="{'tabView__tabContent__item--active': tabsCtrl.tabs[2].selected}">
            content3
          </div>
        </div>
      </div>
      <!-- tabview angular end -->
    </div>
  </main>
</section>
/** 
 * core layout
 * Specify the core layout styles
 */
@color-dev-bg: rgba(0,0,0,0.1);

@layout-section-width: 500px;
@layout-aside-width: 150px;
@layout-main-width: 300px;
@layout-gap: 50px;

* { background: @color-dev-bg; outline: 1px solid rgba(255,0,0,0.2) }
section { width: @layout-section-width; margin: 0 auto;}
section * { box-sizing: border-box; }
section aside { width: @layout-aside-width; margin: 0 @layout-gap 0 0; float: left; }
section main { width: @layout-main-width; float: left; }
section:after { content: ""; display: block; clear: left; }

/* generic columns */
.row .col { float: left; }
.row:after { content: ""; display: block; clear: left; }

/**
 * Form Fields
 */
.form-checkbox {
  @form-checkbox__border-color: blue;
  @form-checkbox__border-width: 3px;
  @form-checkbox__box-size: 10px;
  @form-checkbox__gap: 15px;
  
  position: relative;
  & input[type=checkbox] { display: none; }
  & label { position: relative; display: block; padding: 0 0 0 @form-checkbox__box-size+@form-checkbox__gap; cursor: pointer; }
  & label:before,
  & label:after { content: ""; position: absolute; top: 50%; left: 0; display: block; width: @form-checkbox__box-size; height: @form-checkbox__box-size; margin: -@form-checkbox__box-size/2 0 0 0;}
  & label:before { border: @form-checkbox__border-width solid @form-checkbox__border-color; }
  & input[type=checkbox]:checked + label:after { content: "x"; color: #fff; text-align: center; }
}

/** 
 * custom tableViewCell
 */
.componentResultRow > .row > .col:nth-child(1) { background: red }
.componentResultRow > .row > .col:nth-child(2) { background: blue }
.componentResultRow > .row > .col:nth-child(3) { background: red }

/** 
 * Specify A Component
 */
.tabView__tabContent__item { display: none; }
.tabView__tabContent__item--active { display: block; }