JSFiddle - React, Tailwind, and code Playground

HTML

<div class="answers" tabindex="-1"><span>answers</span>
  <label class="answers__label" for="labelID">
      <div class="answers__inner" id="labelID">
       <p> комментарий для user</p>
       <form action="">
            <textarea></textarea>
            <input type="submit">
           <input type="reset">
       </form>
     </div>
  </label>
</div>

SCSS

.answers {
  position: relative;  
  &__inner {
    position: absolute;
    left: 0;
    min-width: 300px;
    max-width: 300px;    
    display: none;
    background: #fbfbfb;
    border-radius: 6px;
    padding: 20px;
  }
  &:focus .answers__inner,
  &__inner:hover {
    display: block;    
    z-index: 999;
    box-shadow: 0 0 10px blue;
  }
}