JSFiddle - React, Tailwind, and code Playground

Mentions Autocomplete with AtWho

HTML

<script src="https://cdn.rawgit.com/ichord/At.js/801c87dc/dist/js/jquery.atwho.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<br/>

<p>
</p>

<div class="container">

  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <form id="registration">
        <div class="form-group">
          <label class="control-label">Some Label</label>
          <input class="form-control " name="Service_Account_Id" placeholder="Enter your Label " type="text">

        </div>
        <div class="form-group">
          <label class="control-label">Some  Label</label>
          <input class="form-control ng-untouched ng-pristine ng-invalid" name="Zip_Code" placeholder=" Enter your Something" type="text">
          <!---->
        </div>
      </form>
    </div>
  </div>
  <br><br>
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">

    <nav class="navbar navbar-default bg-light">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Comment </a>
        </div>
        <div class="navbar-left">
          <ul class="nav navbar-nav">
            <li class="divider"></li>
            <li><a href="#stay"><i class="fa fa-thumbs-up"></i> LIKE</a></li>
          </ul>
        </div>
         <div class="navbar-right">
            <ul class="nav navbar-nav">
      <li class="active"><a href="#">YAKAWIKI</a></li>
      <li><a href="#stay">HTML</a></li>
    </ul>
        </div>
      </div>
    </nav>
    <div contentEditable="true" id="inputor" class="contentEditable"></div>
<small...

CSS

body {
  background: #f8f8f8;
  font-family: "Open Sans", "Tahoma", sans-serif;
  font-size: 16px;
  color: #222;
}

.row {
  position: relative
}

.navbar {
  position: absolute;
  top: 0;
  width: 96%;
  z-index: 2
}

.fa-gray {
  color: #ccc;
}

.contentEditable {
  border: 1px solid #ddd;
  height: 400px;
  width: auto;
  border-top: 0;
  overflow-y: auto;
  padding: 70px 20px 10px;
  background-color: #fff;
  color: #777;
}

b {
    color: #666;

}
small {
  display: block;
  color: #999;
  margin-top: -200px;
  font-size: 14px;
}

.atwho-view {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  margin-top: 18px;
  background: white;
  color: black;
  border: 1px solid #DDD;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 11110 !important;
}

.atwho-view .atwho-header {
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  border-bottom: solid 1px #eaeff1;
  color: #6f8092;
  font-size: 11px;
  font-weight: bold;
}

.atwho-view .atwho-header .small {
  color: #6f8092;
  float: right;
  padding-top: 2px;
  margin-right: -5px;
  font-size: 12px;
  font-weight: normal;
}

.atwho-view .atwho-header:hover {
  cursor: default;
}

.atwho-view .cur {
  background: #3366FF;
  color: white;
}

.atwho-view .cur small {
  color: white;
}

.atwho-view strong {
  color: #3366FF;
}

.atwho-view .cur strong {
  color: white;
  font: bold;
}

.atwho-view ul {
  /* width: 100px; */
  list-style: none;
  padding: 0;
  margin: auto;
  max-height: 200px;
  overflow-y: auto;
}

.atwho-view ul li {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px solid #DDD;
  cursor: pointer;
  /* border-top: 1px solid #C8C8C8; */
}

.atwho-view small {
  font-size: smaller;
  color: #777;
  font-weight: normal;
}

#inputcity {
  width: 300px;
  height: 100px;
  background-color: white;
}

.urn {
  font-weight: bold;
}

.code {
    background: #f8f8f8;
    border: 1px solid #ddd;
    width: 98%;
    height: 200px;
    overflow:...

JavaScript

// Initialize author field
$('#inputor').atwho({
  at: "@",
  data: ['Peter Smith', 'Tom Jones', 'Anne Jone'],
  insertTpl: '<span class="urn"><a href="#" class="name">${name}</a></span>'

});

$('#inputor').atwho({
  at: "**",
  data: ['Defect 20', 'Defect 30', 'Export Wrong User'],
  insertTpl: '<span class="ybx-profile"><i class="fa fa-cog fa-gray"></i> <a href="#" >${name}</a></span>'
});

$('#inputor').atwho({
  at: "#",
  data: ['Tagaliacious', 'Tagorama', 'SweetTagOMine'],
  insertTpl: '<span class="urn"><i class="fa fa-tag fa-gray"></i> <a href="#" >${name}</a></span>'
});

$('#inputor').atwho({
  at: "ii",
  data: ['image1', 'image 2', 'image3'],
  insertTpl: '<div><img class="image image-responsive" src="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&h=350"></div>'
});


$('.contentEditable').focus( function () {
  $('.help').addClass('moveDown');
});

$('.contentEditable').blur( function () {
  if ($(this).is(':empty'))
  {

$('.help').removeClass('moveDown');
  }
});