JSFiddle - React, Tailwind, and code Playground

HTML

<br /><br /><br /><br /><br /><br /><br /><br/><br /><br/>
<div class="greet">.</div>
<div class="ht">HINT</div>
<div class="ht">HINT</div>
<div class="ht">HINT</div>

CSS

a , .ht {cursor: pointer}
.ht {
    display: inline-block;
    width: 6em;
    line-height: 2em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color:#FFF;
    border-radius: .4em;
    -webkit-box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    background:#749A02;
}

.greet {
    display: none;
    position: relative;
    width: 6em;
    line-height: 2em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color:#FFF;
    border-radius: .4em;
    background:#000;
}

JavaScript

// Hint button
$('.ht').click(function hint() {
    score = 'Hello';
      $('.greet').text(score);
    
    $('.greet')
          .hide()
          .css({
              bottom: 20,
              left: 0,
              opacity: 1,
          })
          .show()
          .stop()
          .delay(200)  
});