<!-- Nav tabs -->
<ul class="nav justify-content-end u-nav-v2-1 u-nav-dark g-mb-20" role="tablist" data-target="nav-2-1-default-hor-center" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray g-mb-20">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#nav-2-1-dark-hor-right--1" role="tab">タブ1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nav-2-1-dark-hor-right--2" role="tab">タブ2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nav-2-1-dark-hor-right--3" role="tab">タブ3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nav-2-1-dark-hor-right--4" role="tab">タブ4</a>
</li>
</ul>
<!-- End Nav tabs -->
<!-- Tab panes -->
<div id="nav-2-2-default-hor-center" class="tab-content">
<div class="tab-pane fade show active" id="nav-2-1-dark-hor-right--1" role="tabpanel">
<p>タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身 タブ1の中身</p>
<p>タブ1の中身</p>
</div>
<div class="tab-pane fade" id="nav-2-1-dark-hor-right--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-dark-hor-right--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-dark-hor-right--4" role="tabpanel">
<p>タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身</p>
<p>タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身 タブ4の中身</p>
</div>
</div>
<!-- End Tab panes -->