JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading custom-tab dark-tab">
                <ul class="nav nav-tabs">
                    <li class="derp"> <a href="#home2" data-toggle="tab">Home</a>

                    </li>
                    <li class="derp"> <a href="#about2" data-toggle="tab">About</a>

                    </li>
                    <li class="active derp"> <a href="#profile2" data-toggle="tab">Profile</a>

                    </li>
                    <li class="derp " style=""> <a href="" class="fa toggle fa-chevron-down" style="background-color: none;"></a>

                    </li>
                </ul>
            </header>
            <div style="display: block;" class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane" id="home2">Home</div>
                    <div class="tab-pane" id="about2">About</div>
                    <div class="tab-pane active" id="profile2">Profile</div>
                    <div class="tab-pane" id="contact2">Contact</div>
                </div>
            </div>
        </section>
    </div>
</div>

CSS

/*------------------------------------------
Template Name: AdminEx Dashboard
Author: ThemeBucket
-------------------------------------------*/

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url('bootstrap.min.css');
@import url('bootstrap-reset.css');
@import url('jquery-ui-1.10.3.css');
@import url('../fonts/css/font-awesome.min.css');
@import url('custom-ico-fonts.css');

body {
    background: #424f63;
    font-family: 'Open Sans', sans-serif;
    color: #7a7676;
    line-height: 20px;
    overflow-x: hidden;
    font-size: 14px;
}
.derp {
    height: 40px;
}
input, select, textarea {
    font-family: 'Open Sans', sans-serif;
    color: #767676;
}

a {
    color: #65CEA7;
}

a:focus, a:active, a:hover {
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    color: #353F4F;
}

h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', sans-serif;
}

.mtop10 {
    margin-top: 10px;
}

hr {
    border-color: #ddd;
}

/*-------------------------------
            LOGIN STYLES
-------------------------------*/

.login-body {
    background: #65cea7 url("../images/login-bg.jpg") no-repeat fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.form-signin {
    max-width: 330px;
    margin: 100px auto;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.form-signin .form-signin-heading {
    margin: 0;
    padding: 25px 15px;
    text-align: center;
    color: #fff;
    position: relative;
}

.sign-title {
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: -60px;
    left: 0;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
}

.form-signin .checkbox {
    margin-bottom: 14px;
    font-size: 13px;
}

.form-signin .checkbox {
    font-weight: normal;
    color: #fff;
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
   ...

JavaScript

$(document).on('click', '.toggle', function(e){
    e.preventDefault();
    thispanel = $(this).closest(".panel");
    el = $(thispanel).find(".panel-body");
    
    if ($(this).hasClass("fa-chevron-down")) {
        $(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
        el.slideUp(200);
    } else {
        $(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
        el.slideDown(200); }
});