<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;    }