JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.1.1/xregexp-all.min.js"></script>
Unicode-Aware Character Counter
<br>
<textarea id="text" placeholder="Enter your text here." autofocus></textarea>
<br> Characters: <span id="count">0</span>

CSS

html {
  width: 100%;
  height: 100%;
  display: table;
}

body {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

#text {
  width: 80%;
  height: 80%;
  max-width: 800px;
  max-height: 600px;
}

JavaScript

function safelength(m) {
  return (m && m.length) ? m.length : 0;
}

var input = document.getElementById('text');
var count = document.getElementById('count');
input.addEventListener('input', function() {
  var text = input.value;
  var cchars = safelength(XRegExp.matchChain(text, [XRegExp('[\\pL0-9]')]));
  count.textContent = cchars;
});