JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<form action="">
  <div class="counter-box">
    <textarea name="" id="" cols="30" rows="10" class="counte-input" max="360"></textarea>
    <span class="counter-text">
      <span class="counter-text__current">0</span>
      /
      <span class="counter-text__total">360</span>
    </span>
  </div>
</form>

CSS

.counter-box{
  position: relative;
  display: inline-block;
}

.counter-text{
  position: absolute;
  right: 10px;
  bottom: 5px;
}

JavaScript

const ta = document.querySelector('.counte-input')
const counter = document.querySelector('.counter-text__current')

ta.addEventListener('input', onInput)

function onInput(evt){
const length = evt.target.value.length
counter.innerText = length
}