JSFiddle - React, Tailwind, and code Playground

by Alen Subasic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div class="fs" id="formButtons">
					<div class="fs-tabs">
						<a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#formButtons" href="#personalInfo" aria-expanded="true"
							aria-controls="personalInfo">
							Personal Info
						</a>
						<a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#formButtons" href="#assessmentResults"
							aria-expanded="false" aria-controls="assessmentResults">
							Personal Info
						</a>
					</div>

					<div class="fs-content accordion-group">
						<div class="panel-collapse collapse in" id="personalInfo" role="tabpanel" aria-labelledby="headingOne">
							<div class="fs-content-body">
								personal info content
							</div>
						</div>
						<div class="panel-collapse collapse" id="assessmentResults" role="tabpanel" aria-labelledby="headingOne">
							<div class="fs-content-body">
								assessment results content
							</div>
						</div>
					</div>
				</div>

CSS

.collapse.in { min-height: 50px;border: 1px solid blue; }