JSFiddle - React, Tailwind, and code Playground

HTML

<div class="personal-dropdown">
  <button class="personal-dropbtn">This is the hover</button>
  <div class="personal-dropdown-content">
    <a href="#">Link1</a>
    <br /> <a href="#">Link2</a>
    <br /> <a href="#">Link3</a>
    <br /> Sometext
  </div>
</div>

CSS

.personal-dropbtn {
  border: none;
  cursor: pointer;
}

.personal-dropdown {
  position: relative;
  display: inline-block;
}

.personal-dropdown-content {
  background: #DDD;
  display: none;
  position: absolute;
  right: 0;
}

.personal-dropdown-content a {
  display: block;
}

.personal-dropdown-content a:hover {}

.personal-dropdown:hover .personal-dropdown-content {
  display: block;
}