JSFiddle - React, Tailwind, and code Playground

HTML

<div> <span class="punkt1">
<span id="tre1"></span>

<span id="te1"></span>
</span>
<span id="punkt1"></span>

</div>

CSS

#tre1 {
    position: absolute;
    top: 105px;
    left: 61.5%;
    width: 0;
    height: 0;
    border-bottom: 100px solid #CCC;
    border-right: 150px solid transparent;
}
#te1 {
    position:absolute;
    top: 205px;
    left: 61.5%;
    background-color:#939;
    width:150px;
    height:150px;
}
#punkt1 {
    position: absolute;
    top: 60px;
    left: 60%;
    width: 30px;
    height:30px;
    border-radius: 15px;
    background-color:#4ec461;
}
.punkt1 {
    display: none;
}

JavaScript

$("#punkt1").click(function () {
    $(".punkt1").show(600);
}, function () {
    $(".punkt1").delay(100).hide(100);
})