mekuma-inc
12/30/2019 - 2:06 PM

Tabs v2-1 Light color, horizontal, navigation fill

<div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-30">
    <!-- Nav tabs -->
    <ul class="nav nav-fill u-nav-v2-1 u-nav-light g-mb-20" role="tablist" data-target="nav-2-1-primary-hor-fill" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white g-mb-20">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#nav-2-1-primary-hor-fill--1" role="tab">タブ1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#nav-2-1-primary-hor-fill--2" role="tab">タブ2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#nav-2-1-primary-hor-fill--3" role="tab">タブ3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#nav-2-1-primary-hor-fill--4" role="tab">タブ4</a>
        </li>
    </ul>
    <!-- End Nav tabs -->

    <!-- Tab panes -->
    <div id="nav-2-1-primary-hor-fill" class="tab-content">
        <div class="tab-pane fade show active" id="nav-2-1-primary-hor-fill--1" role="tabpanel">
            <p>タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身</p>
            <p>タブ1の中身</p>
        </div>
        <div class="tab-pane fade" id="nav-2-1-primary-hor-fill--2" role="tabpanel">
            <p>タブ2の中身 タブ2の中身 タブ2の中身 タブ2の中身 タブ2の中身</p>
            <p>タブ2の中身 タブ2の中身 タブ2の中身</p>
        </div>
        <div class="tab-pane fade" id="nav-2-1-primary-hor-fill--3" role="tabpanel">
            <p>タブ3の中身 タブ3の中身 タブ3の中身 タブ3の中身 タブ3の中身</p>
            <p>タブ3の中身 タブ3の中身 タブ3の中身</p>
        </div>
        <div class="tab-pane fade" id="nav-2-1-primary-hor-fill--4" role="tabpanel">
            <p>タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身</p>
            <p>タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身</p>
        </div>
    </div>
    <!-- End Tab panes -->
</div>