JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion" id="accordion2">
   <div class="panel panel-primary">

<div class="panel-heading header">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#region">
      <div class="sqr pull-left "><span>1</span></div>
      <div class="appTest">Region</div>
     </a>
  </h4>
</div>

<div id="region" class="panel-collapse collapse in">
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
</div>
</div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.sqr {
  width: 2em;
  height: 2em;
  padding: 4px;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid #5fa3c6;
  font: 12px Arial, sans-serif;
  text-align: center;
  color: #5fa3c6;
  margin: 0 17px;
}

.appTest {
  padding-top: 4px;
}

header{
  box-shadow: -10px 10px #CCC;
}