JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion1">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion1" data-target="#_1-1">XXXXXXXXXXXXX</div>
<div id="_1-1" class="panel-collapse collapse">XXXXXXXXXXXXX</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion1" data-target="#_1-2">XXXXXXXXXXXXX</div>
<div id="_1-2" class="panel-collapse collapse">
<div class="panel-group" id="accordion2">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion2" data-target="#_2-1">XXXXXXXXXXXXX</div>
<div id="_2-1" class="panel-collapse collapse">XXXXXXXXXXXXX</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion2" data-target="#_2-2">XXXXXXXXXXXXX</div>
<div id="_2-2" class="panel-collapse collapse">
<div class="panel-group" id="accordion3">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_3-1">XXXXXXXXXXXXX</div>
<div id="_3-1" class="panel-collapse collapse">XXXXXXXXXXXXX</div>
</div>
<div class="panel...