JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boot-accordian">
  <button class="accordion">listings</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">contract information</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">letter templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendaraccounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">tasks and task templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">secure file storage</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies...

CSS

.boot-accordian {
  padding-top: 2%;
}

.boot-accordian button.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8% 1% 0.8% 3%;
}

.boot-accordian .para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}

.boot-accordian button.accordion.active,
.boot-accordian button.accordion:hover {
  background-color: #362f29;
}

.boot-accordian button.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: 29547d;
  float: right;
}

.boot-accordian button.accordion.active:after {
  content: "\2796";
}

.boot-accordian div.panel {
  padding: 0 18px;
  display: none;
  background-color: #433a31;
  overflow: auto;
}

.boot-accordian div.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

JavaScript

jQuery(document).ready(function() {
	$(".accordion").click(function(){
    $(".accordion").removeClass("active");
    $(".panel").removeClass("show");
    $(this).addClass("active");
    $(this).next(".panel").addClass("show");
  })
});