JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<div class="menu">
	<div class="button">button</div>
	<div class="list">
		<div class="list__item">lorem</div>
		<div class="list__item">lorem</div>
		<div class="list__item">lorem</div>
		<div class="list__item">lorem</div>
		<div class="list__item">lorem</div>
	</div>
</div>

SCSS

@keyframes open {
  0%   { opacity: 0; transform: scale(1, 0); height: 0; }
  98% { opacity: 1; transform: scale(1, 1); }
  99% { display: block; }
  100% { display: none; }
}

.menu {
  display: inline-block;
  * {
      padding: 3px 5px;
  }


	.list {
	  transform-origin: 0 0;
    display: none;
    
    &__item:hover {
      background-color: #fec;
    }
	}



	&:hover .list {
	  display: block;
		animation: open 1s backwards;
	}
}