<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 red" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Follow</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a>
    </li>
</ul>

<!-- Tab panels -->
<div class="tab-content card">

    <!--Panel 1-->
    <div class="tab-pane fade in active" id="panel1" role="tabpanel">
        <br>

		<!--Accordion wrapper-->
		<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">

			<!--First panel-->
			<div class="panel panel-default">

				<!--Panel heading-->
				<div class="panel-heading" role="tab" id="headingOne">
					<h5 class="panel-title">
		<a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1<i class="fa fa-angle-down rotate-icon"></i>
		</a>
			</h5>
				</div>

				<!--Panel body-->
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
					Anim pariatur cliche reprehenderit, enim eiusmod high life 
				</div>
			</div>
			<!--/.First panel-->

		</div>
		<!--/.Accordion wrapper-->
	
    </div>
    <!--/.Panel 1-->

    <!--Panel 2-->
    <div class="tab-pane fade" id="panel2" role="tabpanel">
        <br>

        <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 2-->

    <!--Panel 3-->
    <div class="tab-pane fade" id="panel3" role="tabpanel">
        <br>

        <p>Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 3-->

</div>