JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<script src="https://rawgit.com/simplefocus/FlowType.JS/master/flowtype.js"></script>
<div class="circle">
    <div class='circle-text'>ABCDED</div>
</div>
<div class="circle">
    <div class='circle-text'>ABCDEFGHIJKJSMEJ</div>
    </div

CSS

div.circle {
    width: 150px;
    float: left;
    border: 1px solid black;
     -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    margin: 20px;
    font-size: 16px;
    /* 100 = view port width, as 1vw = 1/100th of that
       So if the container is 50% of view port (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}

div + div {
    
    font-size: 1.5vw; /* 5vw * .3 */
}

JavaScript

$(function () {

});