<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://chinahuts.com/tab/colorfulTab.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chinahuts.com/tab/colorfulTab.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Colorful bootstrap tap with flatline theme </h2>
<div class="colorful-tab-wrapper" id="colorful">
<ul class="colorful-tab-menu">
<li class="colorful-tab-menu-item active" tab-color="#00A566"><a href="#clr-0">Tab 1</a></li>
<li class="colorful-tab-menu-item" tab-color="#8021D3"><a href="#clr-1">Tab 2</a></li>
<li class="colorful-tab-menu-item" tab-color="#C9003C"><a href="#clr-2">Tab 3</a></li>
</ul>
<div class="colorful-tab-container">
<div class="colorful-tab-content active" id="clr-0">
<h2>Tab Content 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
<div class="colorful-tab-content" id="clr-1">
<h2>Tab Content 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
<div class="colorful-tab-content" id="clr-2">
<h2>Tab Content 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et temporibus eius impedit atque ipsam facere dolorum sint, distinctio nostrum optio ut ullam dolores magnam accusamus recusandae vitae dolorem illum, repudiandae quae in voluptatibus. Dignissimos nobis sed veritatis dolores amet quibusdam expedita laborum incidunt hic, sapiente soluta beatae error quam sint?
</p>
</div>
</div
</div>
</div>
</div>
.colorful-tab-wrapper {
width:100%;
margin:0px auto;
background: #f0efef;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
transition: background .3s ease 0s
}
ul{
list-style:none;
}
.colorful-tab-content p{
color:#fff;
}
.colorful-tab-content h2{
color:#000;
}
.colorful-tab-menu a:hover{
text-decoration:none;
}
.colorful-tab-wrapper:before {
position: absolute;
height: 100%;
width: 100%;
display: flex;
opacity: 0;
visibility: hidden;
left: 0;
top: 0;
content: "";
box-sizing: border-box;
overflow: hidden;
transform: scale(2) rotate(10deg);
font-size: 50px;
transition: all .6s ease 0s;
padding-top: 60px;
align-items: center;
justify-content: center;
color: #9e9e9e !important;
}
.colorful-tab-wrapper.active:before {
content: attr(active-tab);
transform: scale(1) rotate(0deg);
font-family: "Montserrat";
z-index: 9;
opacity: 1;
visibility: visible
}
.colorful-tab-wrapper.active .colorful-tab-content {
color: white
}
.colorful-tab-background-image {
background-attachment: fixed !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important
}
.colorful-tab-background-image:after {
transition: .5s ease 0s;
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
top: 0;
background: #000
}
.colorful-tab-background-image.active {
background-image: none
}
.colorful-tab-background-image.active:after {
width: 100%;
opacity: .5
}
.colorful-tab-menu {
display: flex;
flex-wrap: wrap;
background:#ed1c24;
margin-bottom: 20px;
position: relative;
z-index: 99
}
.colorful-tab-menu-item {
flex: 1 1 auto;
align-self: stretch
}
.colorful-tab-menu-item a {
display: block;
text-decoration: none;
font-family: "Montserrat";
color: #fff ;
text-align: center;
padding: 20px 0;
font-size: 18px;
transition: background .3s ease 0s, color .3s ease 0s
}
.colorful-tab-menu-item.active a {
background:#000;
color:#fff;
}
.colorful-tab-menu-item.hover a{color:#fff !important;}
.colorful-tab-container {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column
}
.colorful-tab-content {
height: 0;
overflow: hidden;
opacity: 0;
color: #6d6d6d !important;
visibility: hidden;
position: relative;
z-index: 9;
font-family: "Questrial";
font-size: 15px;
line-height: 28px;
width: 0;
letter-spacing: .4px;
transform: scale(0.9);
transition: all .3s ease-in;
filter: blur(2px)
}
.colorful-tab-content.active {
height: auto;
overflow: auto;
transition-delay: .7s;
width: auto;
opacity: 1;
filter: blur(0);
visibility: visible;
transform: scale(1)
}
.colorful-tab-wrapper.elliptic {
border-radius: 10px;
padding: 0
}
.colorful-tab-wrapper.elliptic:before {
padding-top: 55px
}
.colorful-tab-wrapper.elliptic .colorful-tab-menu {
margin: 0
}
.colorful-tab-wrapper.elliptic .colorful-tab-container {
padding: 20px;
box-sizing: border-box
}
.colorful-tab-wrapper.flatline {
padding: 10px 20px 20px 20px
}
.colorful-tab-wrapper.flatline:before {
padding-top: 55px
}
.colorful-tab-wrapper.flatline .colorful-tab-menu {
background: none;
margin-bottom: 15px;
box-shadow: 0 -2px 0 rgba(255,255,255,0.2) inset
}
.colorful-tab-wrapper.flatline .colorful-tab-menu-item a {
transition: box-shadow .3s ease 0s, opacity .3s ease 0s;
opacity: .5
}
.colorful-tab-wrapper.flatline .colorful-tab-menu-item.active a {
background: none;
opacity: 1;
box-shadow: 0 -2px 0 #fff inset
}
@media (max-width: 767px) {
.colorful-tab-menu {
flex-direction: column
}
}
!function(a){a.fn.colorfulTab=function(e){var r=a(this),t=a.extend({theme:"",backgroundImage:!1,overlayColor:"#000",overlayOpacity:".6"},e);return this.each(function(){function e(a,e){var r=a.replace("#","");r=r.match(new RegExp("(.{"+r.length/3+"})","g"));for(var t=0;t<r.length;t++)r[t]=parseInt(1==r[t].length?r[t]+r[t]:r[t],16);return"undefined"!=typeof e&&r.push(e),""+r.join(",")}r.addClass(t.theme);var o=r.find(".colorful-tab-menu-item.active"),l=r.find(".colorful-tab-menu-item"),n=r.find(".colorful-tab-content"),c=r.find(".colorful-tab-menu-item a");if(1==!t.backgroundImage){var i=o.attr("tab-color");r.css("background",i)}else{r.addClass("colorful-tab-background-image");var s=o.attr("tab-background");r.css("background","linear-gradient( rgba("+e(t.overlayColor,t.overlayOpacity)+"), rgba("+e(t.overlayColor,t.overlayOpacity)+") ),url("+s+")")}a(c).click(function(o){var c=a(this).attr("href"),i=a(this).text(),s=a(this).parent();if(!s.hasClass("active")){if(l.removeClass("active"),s.addClass("active"),n.removeClass("active"),a(c).addClass("active"),r.attr("active-tab",i),r.addClass("active"),1==!t.backgroundImage){var u=s.attr("tab-color");r.css("background",u)}else{var v=s.attr("tab-background");r.css("background","linear-gradient( rgba("+e(t.overlayColor,t.overlayOpacity)+"), rgba("+e(t.overlayColor,t.overlayOpacity)+") ),url("+v+")")}setTimeout(function(){r.removeClass("active")},800)}o.preventDefault()})})}}(jQuery);
$('#colorful').colorfulTab({theme:'flatline'});
