Element Tab

    <div class="elements-tab-3">
    <!-- Nav tabs -->
    <div class="text-left">
    <ul class="elements-tab-menu clearfix">
    <li class="active"><a href="#home3" data-toggle="tab">Home</a></li>
    <li><a href="#profile3"  data-toggle="tab">Profile</a></li>
    </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home3">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile3">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    </div>

    .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    <div class="elements-tab-4">
    <!-- Nav tabs -->
    <div class="text-right">
    <ul class="elements-tab-menu clearfix">
    <li class="active"><a href="#home4" data-toggle="tab">Home</a></li>
    <li><a href="#profile4"  data-toggle="tab">Profile</a></li>
    </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home4">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile4">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    </div>

   .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    <div class="elements-tab-3">
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home5">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile5">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    <!-- Nav tabs -->
    <div class="text-left">
    <ul class="elements-tab-menu clearfix">
    <li class="active"><a href="#home5" data-toggle="tab">Home</a></li>
    <li><a href="#profile5"  data-toggle="tab">Profile</a></li>
    </ul>
    </div>
    </div>

   .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    <div class="elements-tab-4">
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home6">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile6">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    <!-- Nav tabs -->
    <div class="text-right">
    <ul class="elements-tab-menu clearfix">
    <li class="active"><a href="#home6" data-toggle="tab">Home</a></li>
    <li><a href="#profile6"  data-toggle="tab">Profile</a></li>
    </ul>
    </div>
    </div>

   .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    <div class="elements-tab-1">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    <p>Popular</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
    <p>Profile</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    </div>
    </div>

   .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;

    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    } 

    <div class="elements-tab-2">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs text-right" role="tablist">
    <li role="presentation" class="active"><a href="#home2" aria-controls="home2" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab">Profile</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home2">
    <p>Popular</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile2">
    <p>Profile</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    </div>
    </div>

    .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    <div class="elements-tab-7">
    <!-- Nav tabs -->
    <div class="text-left">
    <ul class="elements-tab-menu element-line-btm clearfix">
    <li class="active"><a href="#home7" data-toggle="tab">Home</a></li>
    <li><a href="#profile7"  data-toggle="tab">Profile</a></li>
    <li><a href="#message7"  data-toggle="tab">Message</a></li>
    </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home7">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile7">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    <div class="tab-pane" id="message7">
    <p>Message</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    </div>

   .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }
     /*elements-tab-7*/
    .elements-tab-7 .elements-tab-menu li {
    margin: 0 20px 0 0;
    }
    .elements-tab-7 .elements-tab-menu li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 5px 0px;
    }
    .elements-tab-7 .elements-tab-menu li.active a {
    color: #C8A165;
    }

    .element-line-btm li.active {
    position: relative;
    }
    .element-line-btm li.active::before {
    background: #d3b484 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 40px;
    }
    .elements-tab-7 .element-line-btm li.active::before {
    left: 0;
    }  

    <div class="elements-tab-8">
    <!-- Nav tabs -->
    <div class="text-right">
    <ul class="elements-tab-menu element-line-btm clearfix">
    <li class="active"><a href="#home8" data-toggle="tab">Home</a></li>
    <li><a href="#profile8"  data-toggle="tab">Profile</a></li>
    <li><a href="#message8"  data-toggle="tab">Message</a></li>
    </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home8">
    <p>Home</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div class="tab-pane" id="profile8">
    <p>Profile</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    <div class="tab-pane" id="message8">
    <p>Message</p>
    <p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
    </div>
    </div>
    </div>

    .elements-tab .tab-content {
    padding: 15px;
    }
    .elements-tab-1  .tab-content, .elements-tab-2  .tab-content {
    border: 1px solid #ddd;
    border-top: 0;
    }
    .elements-tab .nav-tabs > li {
    display: inline-block;
    float: none;
    }
    .elements-tab .nav-tabs li a {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin-right: 1px;
    }
    .elements-tab .nav-tabs li.active a {
    color: #C8A165;
    }

    /* elements-tab-3 */
    .elements-tab-menu {
    display: inline-block;
    }
    .elements-tab-menu li {
    display: block;
    float: left;
    margin: 0 2px;
    }
    .elements-tab-menu li a {
    background: #ddd none repeat scroll 0 0;
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    }
    .elements-tab-menu li.active a {
    background: #C8A165 none repeat scroll 0 0;
    color: #fff;
    }

    /*elements-tab-8*/
    .elements-tab-8 .elements-tab-menu li {
    margin: 0 20px 0 0;
    }
    .elements-tab-8 .elements-tab-menu li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 5px 0px;
    }
    .elements-tab-8 .elements-tab-menu li.active a {
    color: #C8A165;
    }
    .elements-tab-8 .element-line-btm li.active::before {
    right: 0;
    left: auto;
    }