JSFiddle - React, Tailwind, and code Playground

HTML

<div>Nativo: 😀😂😅😇</div>
<div class="noto">Noto Emoji Color: 😀😂😅😇</div>
<div class="noto2">Noto Emoji Regular: 😀😂😅😇</div>
<div class="OpenSansEmoji">Open Sans Emoji: 😀😂😅😇</div>

CSS

@font-face {
  font-family: Noto;
  src: url("https://cdn.rawgit.com/googlei18n/noto-emoji/07ad7f0f/fonts/NotoColorEmoji.ttf");
  unicode-range: U+1F600-1FFFF;
}

@font-face {
  font-family: NotoRegular;
  src: url("https://cdn.rawgit.com/googlei18n/noto-emoji/07ad7f0f/fonts/NotoEmoji-Regular.ttf");
  unicode-range: U+1F600-1FFFF;
}

@font-face {
  font-family: OpenSansEmoji;
  src: url("https://cdn.rawgit.com/MorbZ/OpenSansEmoji/e76f1200/OpenSansEmoji.ttf");
  unicode-range: U+1F600-1FFFF;
}

div {
  font-size: 22px;
}

.noto {
  font-family: Noto;
}

.noto2 {
  font-family: NotoRegular;
}

.open-sans {
  font-family: OpenSansEmoji;
}