JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class="trigger">
   <a>Hova </a>
    <div class="pop-up">
      <div style=margin-top:5px ><font color=#f6f907 size=+1><b>EGYPT</b></font></div>lt E ServT.<br>Email :&nbsp;&nbsp;<a href=mailto:666@t-kkg.com>com </a> <br>
Website :&nbsp;&nbsp;<a href=http://www.petroconsult-eg.com>www.petroconsult-eg.com</a>
</div>
    </div>
</div>&nbsp;<div class="trigger">
   <a>Hova</a>
    <div class="pop-up">
        <div style=margin-top:5px ><font color=#f6f907 size=+1><b>EGYPT</b></font></div>WT.<br>Email :&nbsp;&nbsp;<a href=mailto:555d@petroconsult-eg.com>s45454545.com </a> <br>
Website :&nbsp;&nbsp;<a href=http://www.pe4444t-eg.com>www.55555m</a>
    </div>
</div>
</div>

CSS

.container{
}
.trigger {
    position: relative;
    left:30px;
    width: 40px;
  text-align: left;
  float: left;
  top:150px;
  margin: 15px 15px 10px 5px;
}

.pop-up {
    background:#222222;
    display: none;
    margin: 0px 0px 0px 50px;; padding:  5px;
    position: absolute; top:-100px; left:-30px;
    height:90px;
    width:280px;
    color:#ffffff;
}

JavaScript

$("div.pop-up").css({
    'display': 'block',
    'opacity': '0'
});

$("div.trigger").hover(
function() {
    $(this).find("div.pop-up").stop().animate({
        opacity: 1
    }, 500);
}, function() {
    $(this).find("div.pop-up").stop().animate({
        opacity: 0
    }, 200);
});