JSFiddle - React, Tailwind, and code Playground
HTML
<div class="spacer"></div>
<div class="list-container">
<textarea class="textarea"></textarea>
<ul class="list">
<li>item</li>
</ul>
</div>
CSS
textarea
{
width: 300px;
height: 70px;
padding: 3px;
}
.list {
list-style: none;
background-color: gray;
display: none;
position: absolute;
top: 76px;
left: 0;
margin: 0;
padding: 0;
border: 0;
}
.list-container
{
position: relative;
}
.list li
{
padding: 5px;
width: 294px;
}
JavaScript
$(".textarea").bind("keypress", function (e) {
if (String.fromCharCode(e.keyCode) == '@') {
$(".list").show();
} else{
$(".list").hide();
}
});