JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:100px">

</div>

<div class="tooltip">
        <input type="checkbox" id="clickhere" />
        <label for="clickhere">
           <div class="price-line">click here</div>
        </label>
        <div class="tooltiptext">
            <input type="checkbox" id="closeCheck"/>
            <label for="closeCheck">
              <div class="close">
                X
              </div>
            </label>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

CSS

#clickhere {
  display: none;
}

#clickhere:not(:checked) ~ .tooltiptext {
  display:none;
} 

#clickhere:checked ~ .tooltiptext {
  visibility: visible;
}

#closeCheck {
  display: none;
}

/* #closeCheck:not(:checked) ~.tooltiptext {
  visibility: visible;
} */

#closeCheck:checked ~.tooltiptext {
  display:none;
}

.price-line{
 font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/* 
.price-line:active .tooltiptext {
  visibility: visible;
}

.tooltiptext:hover {
  visibility: visible;
}
 */
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

/* .tooltip:hover .tooltiptext {
  visibility: visible;
} */

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 150%;
  left: 80%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}