JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="clientsDropDown">
  <div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...
      <br /><a href="mailto:[email protected]">[email protected]</a>
    </p>
  </div>
  <!-- /clientsDashboard -->
  <p id="clientsOpen">clients</p>
</div>
<!-- //clientsDropDown -->

CSS

#clientsDropDown {
  position:absolute;
  bottom:0;
  width: 100%;
  padding-bottom:2%;
  z-index: 100;
}
#clientsOpen {
  background: url("images/open.png") no-repeat scroll 68px 10px #414142;
  color: #ececec;
  cursor: pointer;
  float: left;
  font-size: 26px;
  margin: -2px 0 0 10%;
  padding: 0 15px 2px;
  text-decoration: none;
  width: 63px;
}
#clientsCTA {
  background:#414142;
  width:100%;
  color: #CCCCCC;
  text-align:center;
  font-size: 46px;
  margin: 0;
  padding: 30px 0;
  text-decoration: none;
}
#clientsDropDown .clientsClose {
  background-image: url(images/close.png);
}
#clientsDropDown #clientsDashboard {
  display: none;
}

JavaScript

$('#clientsOpen').click(function () {
    $('#clientsDropDown #clientsDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('clientsClose');
  }); // end click