JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="container">
  <textarea id="my-input" placeholder="Enter Text"></textarea>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #dddddd;
}
.container {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  box-shadow: 0px 1px 3px rgba(0,00, 0, 0.2);
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

#my-input {
  text-align: center;
  padding: 8px;
  font-size: 30px;
  line-height: 32px;
}

JavaScript

const tArea = document.querySelector('#my-input')
console.log('org: ', tArea.clientHeight);
tArea.addEventListener('keypress', (e) => {
  console.log('change...', e.target.value, e.target.clientHeight);
  e.target.style.fontSize = ((e.target.clientHeight - 16)/e.target.value.length) + 'px';
});