JSFiddle - React, Tailwind, and code Playground

HTML

This is the dropdown:
<span>Dani
  <div id="tooltip">
    <b>Dani</b><br />
    <i>dani@daniweb.com</i>
  </div>
</span>, that's what should be suggested and replaced with.
<br />
<br />
<br />
<input type="text" placeholder="autofill me please" />

CSS

span {
  position: relative;
  display: inline-block;
  background-color: rebeccapurple;
  color: #EEE;
  font-family: "Calibri", "Arial";
  padding: .5%;
}

div#tooltip {
  background-color: #222;
  color: #EEE;
  padding: 1em;
  display: none;
  position: absolute;
    left: 0;
    top: 100%;
}

span:hover div#tooltip {
  display: inline-block;
}

input {
  padding: .75em;
  font-size: 1.1em;
  width: 400px;
}

JavaScript

var contactList = {
	"dani": "dani@daniweb.com",
  "admin": "admin@localsite.com"
}