JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<textarea placeholder="type message here or add some emojis"></textarea>
<div class="faces">
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/263a.svg" data-src="263a" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60a.svg" data-src="1f60a" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/2639.svg" data-src="2639" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60b.svg" data-src="1f60b" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60c.svg" data-src="1f60c" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60d.svg" data-src="1f60d" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60e.svg" data-src="1f60e" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60f.svg" data-src="1f60f" />
  <img src="//cdn.jsdelivr.net/emojione/assets/svg/1f61a.svg" data-src="1f61a" />
</div>
<div style="clear:both"></div>
Value .val()
<div id="val"></div>
Html .html()
<div id="html"></div>

CSS

textarea{
  width:100%;
  height:2em;
  background:#FFF;
  line-height:1em;
  font-size:0.8em;
}
.faces{
  margin-bottom:2em;
}
.faces{
  width:100%;
  height:auto;
}
.faces img{
  float:left;
  width:8vw;
  margin:1vw;
}
#val, #html{
  border:solid 1px red;
  margin-bottom:2em;
  padding:1em;
}

JavaScript

$(function () {
	$('img').click(function () {
  	$('textarea').html($('textarea').html() + '&#x' + $(this).data('src').toUpperCase());
  })
  $('textarea').bind('change keyup input', function () {
  	$('#val').html($(this).val());
    $('#html').html($(this).html());
  });
});