JSFiddle - React, Tailwind, and code Playground

HTML

<p></p><p></p><p></p></br></br></br>
<div id="tags-title">This is the title of article</div>
<div id="tags-details">Hello <a href="#" class="tags">this</a> is the details page of the article</div>
</br></br></br></br>
<a href="a" class="bubble">LINK</a>

CSS

.tags{

}
#tags-details a{
    color:#f00!important;
    text-decoration:none;
}
#tags-details a:hover{
    color:green!important;
}

.bubble:hover
{
position: relative;
width: 200px;
height: 45px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #FFE34C solid 4px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 16px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 84px;
}

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 18px 19px 0;
border-color: #FFE34C transparent;
display: block;
width: 0;
z-index: 0;
bottom: -22px;
left: 81px;
}