JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        function GetCursorLocation(CurrentTextBox)
        {
            var CurrentSelection, FullRange, SelectedRange, LocationIndex = -1;
            if (typeof CurrentTextBox.selectionStart == "number")
            {
                LocationIndex = CurrentTextBox.selectionStart;
            }
            else if (document.selection && CurrentTextBox.createTextRange)
            {
                CurrentSelection = document.selection;
                if (CurrentSelection)
                {
                    SelectedRange = CurrentSelection.createRange();
                    FullRange = CurrentTextBox.createTextRange();
                    FullRange.setEndPoint("EndToStart", SelectedRange);
                    LocationIndex = FullRange.text.length;
                }
            }
            return LocationIndex;
        }
        function DisplayCursorLocation(CurrentTextBox)
        {
            document.getElementById('Result').innerText = 'Location is ' + GetCursorLocation(CurrentTextBox);
        }
    </script>
</head>
<body>
    <form action="test.htm">
    <input type="text" id="txtInput" onmousedown="DisplayCursorLocation(this)" onmouseup="DisplayCursorLocation(this)"
        onkeyup="DisplayCursorLocation(this)" onkeydown="DisplayCursorLocation(this)" />
    <div id="Result">
    </div>
    </form>
</body>
</html>