JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
    <div class="container">
       <div class="list-wrapper">
         <ul>
           <li>here</li>
           <li>here</li>
           <li>here</li>
         </ul>
       </div>
       here
      
    </div>
    
    <div class="container">
       here
       <div class="list-wrapper">
         <ul>
           <li>here</li>
           <li>here</li>
           <li>here</li>
           <li>Here</li>
           <li>Here</li>
         </ul>
       </div>
    </div>
</div>

SCSS

.container {
  margin-top: 10px;
  position: relative;
  display: inline-block;
  background-color: red;
 
  height: 50px;
  padding: 10px;
  
  .list-wrapper {
    display: none;
    background-color: yellow;
    position: absolute;
    bottom: calc(100% + 5px);
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.5);
   
  }
  
  &:hover {
      .list-wrapper{
        display: block;
      }
    }

}