JSFiddle - React, Tailwind, and code Playground

by Alessi42

HTML

<div class="text" contentEditable="true"></div>
<button id="button">Click</button>

CSS

.text {
  background: green;
  color: #fff;
  transition: min-height .3s ease-in-out;
  min-height: 20px;
  overflow: auto;
}

.max {
  transition: min-height .3s ease-in-out;
  //height: 200px;
  min-height: 200px;
}

JavaScript

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.text').classList.toggle('max');
});