Компонент tabs1 components

<script src="/assets/components/tabs1/tabs1.js"></script>

<!-- навигация -->
<div>
    <button class="button tab-nav bg-blue400 t-white" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group', 'first')">First</button>
    
    <button class="button tab-nav" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group', 'second')">Second</button>
</div>

<!-- табы -->
<div id="tab-group">
    <div id="first" class="tab-content animation-fade bordered pad20">
        <h2>First</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.</p>
    </div>

    <div id="second" class="tab-content b-hide animation-fade bordered pad20">
        <h2>Second</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.</p>
    </div>
</div>

<div class="mar20-tb">
    <button class="button tab-nav" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group2', 'tabA')">First</button>
    <button class="button tab-nav bg-orange" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group2', 'tabB')">Second</button>
</div>

<div id="tab-group2">
    <div id="tabA" class="tab-content b-hide animation-fade">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tabB" class="tab-content animation-fade">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>
</div>

<div class="mar20-tb">
    <button class="button tab-nav bg-red" data-tab-active="bg-red" onclick="tabs1(event, 'tab-group1', 'tab1')">Fade</button>

    <button class="button tab-nav" data-tab-active="bg-pink" onclick="tabs1(event, 'tab-group1', 'tab2')">Left</button>

    <button class="button tab-nav" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group1', 'tab3')">Top</button>

    <button class="button tab-nav" data-tab-active="bg-blue" onclick="tabs1(event, 'tab-group1', 'tab4')">Right</button>

    <button class="button tab-nav" data-tab-active="bg-green" onclick="tabs1(event, 'tab-group1', 'tab5')">Bottom</button>

    <button class="button tab-nav" data-tab-active="bg-red" onclick="tabs1(event, 'tab-group1', 'tab6')">Zoom</button>
</div>

<div id="tab-group1" class="overflow-hidden">
    <div id="tab1" class="tab-content animation-fade">
        <h2>Fade in</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tab2" class="tab-content b-hide animation-left pos-relative">
        <h2>Slide in from left</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>

    <div id="tab3" class="tab-content b-hide animation-top pos-relative">
        <h2>Slide in from top</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>

    <div id="tab4" class="tab-content b-hide animation-right pos-relative">
        <h2>Slide in from right</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tab5" class="tab-content b-hide animation-bottom pos-relative">
        <h2>Slide in from bottom</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>

    <div id="tab6" class="tab-content b-hide animation-zoom">
        <h2>Zoom in</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>
</div>

<div class="flex flex-wrap-tablet">
    <div class="w2col w100-tablet mar20-b">
        <button class="w100 w48-tablet button tab-nav bg-blue400 t-white" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group4', 'tabFirst1')">First</button>

        <button class="w100 w48-tablet button tab-nav" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group4', 'tabSecond1')">Second</button>
    </div>

    <div class="w10col w100-tablet" id="tab-group4">
        <div id="tabFirst1" class="tab-content animation-fade pad20-rl">
            <h2>First</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.</p>
        </div>

        <div id="tabSecond1" class="tab-content b-hide animation-fade pad20-rl">
            <h2>Second</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.</p>
        </div>
    </div>
</div>