JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
        <!-- accordion -->

    <div class="container">
      <div id="accordion" role="tablist" aria-multiselectable="true">


        <div class="row caracteristicas-table">
          <div class="col-sm-12">
            <div role="tab" id="headingOne">

              <h3 class="dark-grey">HERE GOES THE TITLE</h3>

              <span class="orange-line"></span>

               <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>

              
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
                </a>

            </div> <!-- / tab -->   
         
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
            </div>  <!-- / collaspeOne -->

            
          </div><!-- / col --> 
        </div> <!-- / row -->





        <div class="row caracteristicas-table">
          <div class="col-sm-12">
            <div role="tab" id="headingTwo">

              <h3 class="dark-grey">HERE GOES THE TITLE</h3>

              <span class="orange-line"></span>

               <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec...

CSS

/* Base Styles --------------------- */

*,
:after,
:before {
    box-sizing: border-box;
}

body {
	background-color: #F5F5F5;
}


h1,
h2,
h3, 
h4,
h5 {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	color: grey;
}


h1 {
  font-size: 4.5vw; /* xxpx  */
  font-weight: 600;
  line-height: 1.1;
}

h2 {
  font-size: 4.5rem; /* xxpx  */
  font-weight: 700;
  line-height: 1;
}

h3 {
  font-size: 2rem; /* 25px  */
  font-weight: 400;
  line-height: 1.3;
}

h4 {
  font-size: 1.6rem; /* 25px  */
  font-weight: 400;
  line-height: 1.5;
}


/* CaracterĂ­sticas da linha --------------------- */

.caracteristicas-title {
	position: relative;
	padding-top: 6rem;

}

.caracteristicas-table {
	position: relative;
	background-color: white;
	padding: 5rem;
	margin-top: 5rem;
}

.orange-line {
	display: block;
	height: 1px;
	width: 50px;
	border-bottom: 3px solid orange;
}


.text-quero-mais {
	color: orange;
	font-weight: 700;
	display: inline-block;
}


.down-arrow {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin: 6px 10px 0 0;
}

.dark-grey {
	color: #333;
	font-weight: 700;
}

.nested-col{
	top: 2rem;
	background-color: white;
	padding-top: 2rem;

}

.nested-col li {
	color: grey;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: left;
}



/* Bootstrap part --------------------- */

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}