<!-- *** Matrix Widget left-aligned tabs *** -->
<ul class="tabs-nav">
    <li class="active">
        <a href="#tab1">First</a>
    </li>
    <li>
        <a href="#tab2">Second</a>
    </li>
    <li>
        <a href="#tab3">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab1" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab2" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab3" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

<!-- *** Matrix Widget center-aligned tabs *** -->
<ul class="tabs-nav center-align">
    <li class="active">
        <a href="#tab01">First</a>
    </li>
    <li>
        <a href="#tab02">Second</a>
    </li>
    <li>
        <a href="#tab03">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab01" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab02" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab03" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

<!-- *** Matrix Widget center-aligned flexbox tabs *** -->
<ul class="tabs-nav is--flex is-flex-block">
    <li class="active w-100 center-align">
        <a href="#tab001">First</a>
    </li>
    <li class="w-100 center-align">
        <a href="#tab002">Second</a>
    </li>
    <li class="w-100 center-align">
        <a href="#tab003">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab001" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab002" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab003" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

<!-- *** Matrix Add-ons Tabs *** -->
<style>
/*<![CDATA[*/
#cc-inner ul.tabs-nav.styled-tabs > li:hover, ul.tabs-nav.styled-tabs > li.active {
   background-color: #002fdc;
}
    
ul.tabs-nav.styled-tabs > li > a:hover,ul.tabs-nav.styled-tabs > li.active a {
   color:#fff;
}
/*]]>*/
</style>
<ul class="tabs-nav styled-tabs">
    <li class="active">
        <a href="#tab11">First</a>
    </li>

    <li>
        <a href="#tab12">Second</a>
    </li>

    <li>
        <a href="#tab13">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab11" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab12" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab13" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

<!-- *** Matrix Add-ons Tabs *** -->
<style>
/*<![CDATA[*/
#cc-inner ul.tabs-nav.styled-tabs2 > li:hover, ul.tabs-nav.styled-tabs2 > li.active {
   background-color: #333;
}
ul.tabs-nav.styled-tabs2 > li > a:hover,ul.tabs-nav.styled-tabs2 > li.active a {
  color:#fff;
}
.tabs-container.styled-tabs2 {
  padding:20px;
  margin-top:1px;
  border:1px solid rgba(85,85,85, 0.1);
}   
/*]]>*/
</style>

<ul class="tabs-nav styled-tabs2">
    <li class="active">
        <a href="#tab21">First</a>
    </li>

    <li>
        <a href="#tab22">Second</a>
    </li>

    <li>
        <a href="#tab23">Third</a>
    </li>
</ul>

<div class="tabs-container styled-tabs2">
    <div id="tab21" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab22" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab23" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

<!-- *** Matrix Add-ons Tabs *** -->
<style>
/*<![CDATA[*/
#cc-inner ul.tabs-nav.snip-nav a{
   background:none;
   padding:0;
   margin:0;
   font-size:15px;
}
ul.tabs-nav.snip-nav > li{
   margin:0 10px;
}
#cc-inner ul.tabs-nav.snip-nav > li:hover, ul.tabs-nav.snip-nav > li.active {
   color:inherit;
   background:none;
}
#cc-inner ul.tabs-nav.snip-nav  > li > a:hover,
#cc-inner ul.tabs-nav.snip-nav  > li.active > a,    
   
#cc-inner ul.tabs-nav.snip-nav  > li.active > a:before {
  opacity: 1;
  width: 100%;
}
 @media only screen and (max-width: 745px) {
   
    ul.tabs-nav.snip-nav > li {
       width:auto;
       display:table;
       margin:0 auto;
       text-align:center;
        }
}
    
    /*]]>*/
</style><!-- *** Matrix Widget left-aligned tabs *** -->

<ul class="tabs-nav snip-nav center-align">
    <li class="active">
        <a href="#tab31">First</a>
    </li>

    <li>
        <a href="#tab32">Second</a>
    </li>

    <li>
        <a href="#tab33">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab31" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab32" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab33" class="tab-content">
        <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 exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>