JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<div class="pop"></div>
<div id="buttons">
<span class="setpos">10</span>
<span class="setpos">20</span>
<span class="setpos">30</span>
<span class="setpos">40</span>
<span class="setpos">50</span>
<span class="setpos">60</span>
<span class="setpos">70</span>
<span class="setpos">80</span>
<span class="setpos">90</span>
</div>

CSS

.pop {
    width:150px;
    height:130px;

    position:absolute;

    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; 
}
.pop.pos10:after {
    left: 10%;   
}
.pop.pos20:after {
    left: 20%;   
}
.pop.pos30:after {
    left: 30%;   
}
.pop.pos40:after {
    left: 40%;   
}
.pop.pos50:after {
    left: 50%;   
}
.pop.pos60:after {
    left: 60%;   
}
.pop.pos70:after {
    left: 70%;   
}
.pop.pos80:after {
    left: 80%;   
}
.pop.pos90:after {
    left: 90%;   
}
div#buttons {
    padding-top: 150px;   
}
div#buttons span {
    cursor: pointer;   
}

JavaScript

$('span.setpos').click(function() {
    var cls = 'pos' + $(this).text();
    $('div.pop').removeClass()
        .addClass('pop ' + cls);
})