JSFiddle - React, Tailwind, and code Playground

HTML

<div>
with container
</div>
<div class="bar-container">
<div class="barinner">
  <div class="bar-content"></div>
</div>
</div>

<div>
without container
</div>
<div class="bar">
    <div class="bar-content"> </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
  background: white;
}

.bar-content {
  height: 200px;
}

.bar-container {
  -webkit-transition: height 0.3s ease-out;
  background-color: #d79e12;
  height: 225px;
  width: 100%;
  overflow: hidden;
  height: 20px;
}

.bar-container:hover {
  height: 225px;
  width: 100%;
  background-color: #28251f;
}

.barinner {
  height: 225px;
  width: 100%;
  color: white;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.bar:hover {
  -webkit-transition: height 0.3s ease-out;
  height: 225px;
  width: 100%;
  background-color: #28251f;
  color: white;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
 }
.bar {
  -webkit-transition: height 0.3s ease-out;
  width: 100%;
  background-color: #d79e12;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
 }