JSFiddle - React, Tailwind, and code Playground

HTML

<div id="titleA">
<div id="menu">How to...
  <ul id="list">
    <li>How to book a meeting room</li>
    <li>How to book catering</li>
    <li>How to report extra cleaning requirement</li>
    <li>How to report a fault</li>
    <li>How to report a H&amp;S issue</li>
    <li>How to book a hot desk</li>
    <li>What happens if I get locked in</li>
    <li>How to request consumables - for kitchens, photocopiers, etc.</li>
    <li>Out of hours issues affecting buildings / How to make contact in an emergency</li>
    <li>Recycling guide</li>
    <li>Complaints and feedback</li>
  </ul>
  </div>
  </div>

CSS

#menu #list {
  max-height: 0;
  transition: max-height 1.5s ease-out;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  width: 99%;
  border: 1px solid #c8ced0;
  padding: 5px;
  font-size: 14px;
  display: inline-block;
  color: black;
}

#menu:hover #list{
  max-height: 500px;
  transition: max-height 1.5s ease-in;
}

#titleA {
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #5bc0de;
  padding-top: 14px;
  padding-left: 22px;
  height: 54px;
  width: calc(100% - 35px);
  margin-bottom: 5px;
  margin-top: 19px;
  font-size: 25px;
  color: white;
  font-family: 'Open Sans';
  font-weight: bold;
  "

}

#titleB {
  position: absolute;
  top: 0px;
  right: -20px;
  height: 100%;
  width: 50px;
  background: #5bc0de;
  transform: skew(30deg);
}