JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 300px">

</div>

<div class="tooltip">
  <label for="clickable">
     <div class="price-line">price tag</div>
  </label>
  <div class="tooltip-content">       
    <div class ="tooltip-first">
      <h1 class="tooltip-title">BUY THIS</h1>
      <label for="closeCheck">
        <div class="close">
                &#x2715;
        </div>
      </label>
    </div>
    <p class="tooltip-msg"> ON A SALE</p>
    <p class="tooltip-footer"> *BUY NOW</p>

  </div>
</div>

CSS

.close{
  font-size:13px;
}

.price-line{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}
.tooltip-first{
  flex-direction: row;
  justify-content: space-between;
}
.tooltip-title {
  font-weight: 700;
  font-size: 10px;
  line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}

.tooltip-footer {
  font-weight: 400;
  font-size: 5px;
  line-height: 12px;
}

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

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

.tooltip .tooltip-content {
/*   display:none;
   */  
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;

  position: absolute;
  z-index: 1;
}



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

.tooltip .tooltip-content {
  width: 200px;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

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

JavaScript

var dialog= document.querySelector(".tooltip-content");
var openBtn =  document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");

openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})