JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">普通のリンクです。<span class=setumei>にゃー にゃーにゃー</span></a>

CSS

.setumei::after {
    border-color: #e79221 transparent transparent;
    border-style: solid;
    border-width: 7px 7px 0 0;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
a:hover .setumei {
    background-color: #e79221;
    color: #ffffff;
    display: block;
    margin-bottom: 7px;
    padding: 3px;
}
.setumei {
    bottom: 100%;
    display: none;
    position: absolute;
}

a {
    display: block;
    margin: 3em 0;
    position: relative;
}