<div class="tabs tabs--style-1" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="#tabFour-1" aria-controls="home" role="tab" data-toggle="tab" class="nav-link active text-center text-uppercase strong-600"><?php echo $templateTitleShort; ?></a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabFour-2" aria-controls="profile" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-600">Description</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabFour-3" aria-controls="messages" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-600">Support</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tabFour-1">
            <div class="tab-body">
                <p class="mt-4">
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabFour-2">
            <div class="tab-body">
                <p class="mt-4">
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>

                <p class="mt-4">
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabFour-3">
            <div class="tab-body">
                <p class="mt-4">
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="tabs tabs--style-1" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs justify-content-center" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="#tabOneCentered-1" aria-controls="home" role="tab" data-toggle="tab" class="nav-link active text-center text-uppercase strong-500">Boomerang</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabOneCentered-2" aria-controls="profile" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-500">Description</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabOneCentered-3" aria-controls="messages" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-500">Support</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tabOneCentered-1">
            <div class="tab-body">
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabOneCentered-2">
            <div class="tab-body">
                <p class="mt-4">
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>
                <p>
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabOneCentered-3">
            <div class="tab-body">
                <p>
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="tabs tabs--style-2" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="#tabTwo-1" aria-controls="home" role="tab" data-toggle="tab" class="nav-link active text-center text-normal strong-600">Boomerang</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabTwo-2" aria-controls="profile" role="tab" data-toggle="tab" class="nav-link text-center text-normal strong-600">Description</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabTwo-3" aria-controls="messages" role="tab" data-toggle="tab" class="nav-link text-center text-normal strong-600">Support</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tabTwo-1">
            <div class="tab-body">
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabTwo-2">
            <div class="tab-body">
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto.
                </p>
                <p>
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabTwo-3">
            <div class="tab-body">
                <p>
                    Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. Ea ergo ausi ac otii suas. Utrum me sequi falsi ut atque. Existeret conformes his rei scientiis. Virorum corpora hac iis brachia
                </p>
                <p>
                    Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="tabs tabs--style-1 tabs--centered" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-pills nav-pills--rounded" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="#tabThree-1" aria-controls="home" role="tab" data-toggle="tab" class="nav-link active text-center text-uppercase strong-500">
                <div class="nav-pill">
                    <span class="nav-pill-circle">2017</span>
                    <span class="nav-pill-text text-caps strong-500">Concept</span>
                </div>
            </a>
        </li>
        <li class="nav-item" role="presentation" class="">
            <a href="#tabThree-2" aria-controls="home" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-500">
                <div class="nav-pill">
                    <span class="nav-pill-circle">2016</span>
                    <span class="nav-pill-text text-caps strong-500">Concept</span>
                </div>
            </a>
        </li>
        <li class="nav-item" role="presentation" class="">
            <a href="#tabThree-3" aria-controls="home" role="tab" data-toggle="tab" class="nav-link text-center text-uppercase strong-500">
                <div class="nav-pill">
                    <span class="nav-pill-circle">2015</span>
                    <span class="nav-pill-text text-caps strong-500">Concept</span>
                </div>
            </a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content no-border">
        <div role="tabpanel" class="tab-pane active" id="tabThree-1">
            <div class="tab-body">
                <p class="mt-4">
                    Effects present letters inquiry no an removed or friends. Desire behind latter me though in. Supposing shameless am he engrossed up additions. My possible peculiar together to. Desire so better am cannot he up before points. Remember mistaken opinions it pleasure of debating.
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabThree-2">
            <div class="tab-body">
                <p class="mt-4">
                    Nam ullamcorper imperdiet luctus. Vestibulum tincidunt malesuada mi, in posuere augue cursus nec. Morbi et vehicula risus, fermentum lacinia justo. Etiam tellus arcu, eleifend tristique enim rutrum iaculis risus, id tincidunt dui fringilla sed bibendum lorem.
                </p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tabThree-3">
            <div class="tab-body">
                <p class="mt-4">
                    Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.
                </p>
            </div>
        </div>
    </div>
</div>