JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/emojione/2.0.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css">
<br><br>
<p>Hello world I'm buzz 😠</p>
<br><br>

<p id="wrong-test">Hello world I'm buzz <span class="emoji">😠</span></p>

CSS

img.emojione {
  // Override any img styles to ensure Emojis are displayed inline
  margin: 0px !important;
  display: inline !important;
  
  height: auto;
  width: 50px;
}

p#wrong-test {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: inline-block;
}

span.emoji {
  font-size: 30px;
  vertical-align: middle;
  line-height: 2;
}

JavaScript

function convert() {
      var input = document.body.innerHTML;
      var output = emojione.unicodeToImage(input);
      document.body.innerHTML = output;
    }

    convert();