JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<h2 id="myTitle">This is a Title</h2>

CSS

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

    h2 {
      font-size: 50px; /* Default font size */
      width: 100%;
    }

JavaScript

const title = document.getElementById('myTitle');
    const resizeFont = () => {
      const titleWidth = title.offsetWidth;
      title.style.fontSize = titleWidth * 0.1 + 'px'; /* Adjust the factor as needed */
    };
    window.addEventListener('resize', resizeFont);
    resizeFont(); // Initial font size adjustment