JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="target" class="txt" value="ABCKDKGOKG"/>
<button type="button" class="btn" id="action">Click</button>

CSS

.txt {
    border: 1px solid #eee;
    color: #999;
    padding: .5rem;
    transition: all .23s ease-out;
}
.txt:focus {
    box-shadow: 0px 2px 3px rgba(0,0,0,.3);
}
.btn {
    background-color: #00bbff;
    border: 1px solid #00bbff;
    border-radius: 3px;
    color: #fff;
    padding: .5rem 1.15rem;
    transition: background-color .25s ease-out;
}
.btn:hover {
    background-color: #4183d7;
    border: 1px solid #4183d7;
}

JavaScript

window.addEventListener("load", function() {
  
document.querySelector("#action").addEventListener("click", function(e) {
        var inputTarget = document.querySelector("#target");
        inputTarget.focus();
        var cursorPosition = inputTarget.selectionStart;
        alert(cursorPosition);
    });
});