JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<div id="help_activitylist" class="helpmode" style="display: block;">


<div class="panel panel-success">
	    <div class="panel-heading text-center">Hints</div>
		<div class="panel-body">
		    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
			  <div class="panel panel-success">
				<div class="panel-heading" role="tab" id="headingOne">
				  <h4 class="panel-title">
					<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
					  Activity Viewer
					</a>
				  </h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
				  <div class="panel-body">
					  <p><strong>The Activity Viewer is your home base.</strong></p>
					  <p>Come back to it often for alerts about stuff you're interested in: new messages, to-dos, fresh content in the Yakabox™, and so on.</p>
					  <p>The Activity Viewer is also your jumping-off point to places, people and things in the system you visit most often (items you follow).</p>
				  </div>
				</div>
			  </div>
			  <div class="panel panel-success">
				<div class="panel-heading" role="tab" id="headingTwo">
				  <h4...

CSS

body {
  padding:20px;
}
.helpmode .panel {
  overflow:hidden;
}
.helpmode .panel-heading {
  font-weight:bold;
}
.helpmode .panel-group {
  margin:-16px;
}
.helpmode .panel-group .panel-heading {
  background:#fff;
}
.helpmode .panel-group .panel {
  margin:0;
  border-radius:0;
  border-top: 0;
}
.helpmode .panel-group .panel-title a {
  display:block;
}