JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Click Me
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci, quibusdam, minima ratione voluptas quidem porro sint nobis odio cupiditate alias nisi. Magnam et fugiat labore eum at adipisci ex.
      </div>
    </div>
  </div>
</div>

CSS

#accordion {
    position: fixed;
    bottom: 0;
    width: 100%;    
}

.panel-default > .panel-heading{
    background: #00B4FF;
}

.panel-heading {
    padding: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.panel-group .panel {
    border-radius: 0;
}

.panel-title a {
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    display: block;
    padding: 10px 15px;
    font-size: 24px;
    font-family: Helvetica,Arial,sans-serif;
    outline: none;
}

.panel-title a:hover, .panel-title a:focus, .panel-title a:active {
    text-decoration: none;
    outline: none;
}

JavaScript

$('#collapseOne').on('show.bs.collapse', function () {    
    $('.panel-heading').animate({
        backgroundColor: "#515151"
    }, 500);   
})

$('#collapseOne').on('hide.bs.collapse', function () {    
    $('.panel-heading').animate({
        backgroundColor: "#00B4FF"
    }, 500);   
})