JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='bar-box'>
  <div class='bar-label'>
  
  </div>
  <div class='bar'>
  
  </div>
</div>
<div class='bar-box'>
  <div class='bar-label'>
  
  </div>
  <div class='bar'>
  
  </div>
</div>
<div class='bar-box'>
  <div class='bar-label'>
  
  </div>
  <div class='bar'>
  
  </div>
</div>
<div class='bar-box'>
  <div class='bar-label'>
  
  </div>
  <div class='bar'>
  
  </div>
</div>

SCSS

.bar-box {
  display: inline-block;
  // padding: 1px;
  position: relative;
  // border: 1px dashed #ddd;
  margin: 50px 3px;
  
  &:hover {
    
    cursor: pointer;
    
    .bar-label {
      opacity: 1;
      bottom: calc(100% + 5px);
      transform: scale(1);
      transition: all 0.2s cubic-bezier(0.3, 0, 0, 1.3);
    }
    
    .bar {
      background: teal;
      transition: background 0.15s;
    }
  }
}

.bar-label {
  width: calc(100% - 20px);
  height: 35px;
  border-radius: 5px;
  background: #aaa;
  margin: 0 auto;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  position: absolute;
  bottom: calc(100% - 10px);
  left: calc(50% - 40px);
  transform: scale(0.8);
  transition: all 0.2s cubic-bezier(0.3, 0, 0, 1.3);
}

.bar {
  width: 100px;
  height: 160px;
  background: #ddd;
  border-radius: 5px;
  transition: background 0.15s;
}