JSFiddle - React, Tailwind, and code Playground

by janjarfalk

HTML

<div id="box" class="box">
    <span id="price">99</span>
</div>

CSS

.box {
    width: 100%;
    height: 450px;
    background: url('https://www.hallon.se/UI/images/splash_2.png');
    display: block;
    text-align: center;
}

JavaScript

var box = document.getElementById('box');
var price = document.getElementById('price');

var width = box.offsetWidth;
var target = Math.floor(width/2);
var fontSize = 34;

var setSize = function(){
    price.style.fontSize = fontSize++ + 'px'
    currentWidth = price.offsetWidth;
    if(currentWidth < target) setSize();
}

setSize();

window.addEventListener('resize', function(){
    fontsize = 12;
    setSize();
});