JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>
<div class="box"><div class="content" contenteditable>Content</div></div>

CSS

.box
{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
    margin-bottom:10px;
}

.content
{
    text-align:center;
    position:absolute;
    width:150px;
    left:50%;
    margin-left:-75px;
    top:50%;
    margin-top:-7px;
}

JavaScript

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(document).on('mouseenter', '.content', function(e) {$(this).addClass('hovered')}).on('mouseleave', '.content', function(e) {$(this).removeClass('hovered')})

$(document).on('focus', '.content', function(e) {
    if($(this).hasClass('hovered')) return false;
    var top = $(this).offset().top - 100;
    $(this).selectText();
    $('body').animate({
		 scrollTop: top
	 }, 25);
	return true;
});

$('.content').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});