JSFiddle - React, Tailwind, and code Playground

HTML

<h1 contenteditable>Text</h1>
<input type="text" value="Text" />
<br/>
<input type="button" onclick="" value='Deselect input'>
<input type="button" id="deselect" value='Deselect h1'>

CSS

input {
  padding: 5px;
}

input:focus {
  border-width: 1px;
  border-color: #eaedf1 !important;
  outline: 0;
}

JavaScript

$(document).ready(function() {
  $('h1').focus();
  document.execCommand('selectAll', false, null);
  
  $('#deselect').on('click', function(){
  	if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
  });
});