JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

HTML

<div id="square">
    <div id="div"></div>
</div>

CSS

#square {
    width: 400px;
    height: 400px;
}
#div{   /*div central*/
    top:50%;
    margin-top: 20%;
    left:50%;
    margin-left: 20%;
    background: #00A8D9;
    width: 40%;
    height: 40%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
}

JavaScript

$('#div').resize(function(height) {
    var fuente = $(this).height() / 2;
    var margen = (fuente / 2) - 5;
    $('.contenido').css('font-size', fuente + 'px');
    $('.contenido').css('margin-top', margen + 'px');
});