JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
  <div class="panell"></div>

  <a href="www.google.com" class="panelbutton">Open <span>▼</span></a>

</div>

CSS

.panel {
border-top: 2px solid #8C9198;
}

.panell {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-ms-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
display: none;
height: 80px;
margin: 0 auto;
width: 100%;
}

.panelbutton {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FFF), color-stop(100%, #F4F5F4));
background-image: -webkit-linear-gradient(#FFF,#F4F5F4);
background-image: -moz-linear-gradient(#ffffff,#f4f5f4);
background-image: -o-linear-gradient(#ffffff,#f4f5f4);
background-image: linear-gradient(#FFF,#F4F5F4);
border: 1px solid #DEDEDE;
border-top: 0;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
display: block;
font-size: 11px;
font-weight: bold;
padding: 5px 0;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
width: 80px;
}

JavaScript

$('.panelbutton').on('click', function(event){
  event.preventDefault();
  $('.panell').slideToggle('fast', function(event){
    if($(this).is(':visible')){
      $('.panelbutton').html('Close ▲');
    } else {
      $('.panelbutton').html('Open ▼');
    }
  });
});