JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="options-list">
    <li class="option active"><span>FORM FIELD 1</span>
<div class="panel active-panel">
<div class="form-field"><label class="form-label black">Sub Field</label> <input class="form-input" type="text" /></div>
<div class="form-field flt"><label class="form-label black">Sub Field</label> <input class="form-input half" type="text" /><input class="form-input half" type="text" /></div>
<div class="form-field flt"><label class="form-label black cvc">Sub Field</label> <input class="form-input half" type="text" /></div>
</div>
</li>
<li class="option"><span>FORM FIELD 2</span>
<div class="panel"></div>
</li>
<li class="option"><span>FORM FIELD 3</span>
<div class="panel"></div>
</li>
</ul>

CSS

.options-list {
    border: 1px solid #d5d6d7;
    padding: 0;
    margin-bottom: 30px;
}
.option {
    list-style: none;
    border-bottom: 1px solid #dadada;
    font: 16px/56px avenir_65regular !important;
    color: #333;
}
.options-list .option.active {
    color: #004ebc;
}
.options-list .option.active:before {
    background-color: #004ebc !important;
    border: 5px solid #83ace0 !important;
}
.options-list .option:before {
    content: "";
    background-color: #fff;
    border-radius: 16px;
    border: 5px solid #004ebc;
    height: 18px;
    margin: 0 10px;
    width: 18px;
    position: relative;
    top: 3px;
    box-sizing: border-box;
    display: inline-block;
}
.panel {
    height: 0;
    overflow: hidden;
    background: #f9f9f9;
    border-top: 1px solid #d5d6d7;
    transition: all 0.5s linear;
    transition: height 0.25s ease-in-out;
    /* visibility: hidden; */
    /* opacity: 0; */
    /* transition: visibility 0s, opacity 0.5s linear; */
}

.option span.active ~ .panel {
    /* visibility: visible; */
    /* opacity: 1; */
    height: 100%;
    padding: 25px 10px;
}

JavaScript

$(function() {
$('.options-list li span').click(function(){
  $(this).toggleClass('active');
 $(this).parent().children('li').not(this).removeClass('active');
});
});