JSFiddle - React, Tailwind, and code Playground

HTML

<div class="userMenu__inset">
  <div class="drop_button">
  <i class="icon-user"></i><span>{login}</span>
  <ul class="drop-down-header">
    <li><a href="{profile-link}">Профиль</a></li>
    <hr>
    <li>Баланс: </li>
    <li>Карма: </li>
    <hr>
    <li>Выход</li>
  </ul>
  </div>
  <a href="#"><i class="icon icon-purse"></i><span id="balance">93 ₽</span></a>
  
</div>

CSS

.drop-down-header{
  display: none;
}
.drop_button {
  position:relative;
  display:inline-block;
  padding: 10px;
}
.drop-down-header {
  position:absolute;
  top: 100%;
  margin:0;
  background: #ccc;
}
.drop_button:hover .drop-down-header{
  display: block;
}