JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="parent">
<div lcass="sub">
hello
</div> 
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, ipsa nesciunt modi dolor cupiditate magnam, id quaerat praesentium, eveniet incidunt sequi velit accusamus maxime blanditiis deserunt ut vero. Impedit!</li>
  </ul>
</div>

SCSS

.parent{
  background:red;
  
  .sub{
    baground:green;
  }
  ul{
    background:green;
    position:absolute;
    top:10px;
    display:none;
    width:40%;
   li{
      height:100px;
      overflow-y:scroll;
   }
    &:before{
      content:"";
      border-bottom:10px solid green;
      border-right:5px solid transparent;
      border-left:5px solid transparent;
      width:0;
      height:0;
      display:block;
      margin-top:-10px;
    }
  }
  &:hover{
    ul{
      display:block;
    }
  }
}