JSFiddle - React, Tailwind, and code Playground

HTML

<label class="avatar_mini">
  <input/>
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</label>

CSS

.avatar_mini {
  position: relative;
  left: 250px;
  background: red;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 15px 15px 15px 0px;
  display:block;
}
.avatar_mini > input {
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  position:absolute;
  z-index:-1;
}
.avatar_mini > input:focus + ul {
  height: 160px;
  transition: height 1s ease 0.1s;
}
.avatar_mini > ul {
  width: 220px;
  height: 0;
  border-radius: 5px;
  margin-top: 50px;
  float: right;
  background: red;
  overflow: hidden;
  transition: height 1s ease 0.1s;
}
.avatar_mini li {
  display: block;
}