JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pop">click around</div>

CSS

.pop {
    width:150px;
    height:130px;
    color: #fff;
    position:absolute;
    text-align: center;
    line-height: 50px;

    background: -moz-linear-gradient(top, hsla(0,0%,6%,0.95) 0%, hsla(0,0%,6%,0.95) 1%, hsla(0,0%,1%,0.95) 80%, hsla(0,0%,0%,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,6%,0.95)), color-stop(1%,hsla(0,0%,6%,0.95)), color-stop(80%,hsla(0,0%,1%,0.95)), color-stop(100%,hsla(0,0%,0%,1))); 
    background: -webkit-linear-gradient(top, hsla(0,0%,6%,0.95) 0%,hsla(0,0%,6%,0.95) 1%,hsla(0,0%,1%,0.95) 80%,hsla(0,0%,0%,1) 100%); 
    background: -o-linear-gradient(top, hsla(0,0%,6%,0.95) 0%,hsla(0,0%,6%,0.95) 1%,hsla(0,0%,1%,0.95) 80%,hsla(0,0%,0%,1) 100%); 
    background: -ms-linear-gradient(top, hsla(0,0%,6%,0.95) 0%,hsla(0,0%,6%,0.95) 1%,hsla(0,0%,1%,0.95) 80%,hsla(0,0%,0%,1) 100%); 
    background: linear-gradient(top, hsla(0,0%,6%,0.95) 0%,hsla(0,0%,6%,0.95) 1%,hsla(0,0%,1%,0.95) 80%,hsla(0,0%,0%,1) 100%); 
 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.4);  
} 
 
.pop:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 8px solid black; 
 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    position:absolute; 
    bottom:-8px; 
    left:50%; 
    margin-left:-8px; 
}

JavaScript

$("<style type='text/css' id='dynamic' />").appendTo("head");

$('.pop').click(function(e){
   console.log(e)
  $("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});