JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<h1>CSS3: Resize Textarea with Transitions</h1>
<textarea>Resize this textarea (should work great)</textarea>
<textarea id="wtransition">Resize this textarea (has delay)</textarea>
<p>Is there any chance to prevent this delay?</p>

CSS

#wtransition {
  -webkit-transition: box-shadow 0.3s ease-out;  
     -moz-transition: box-shadow 0.3s ease-out;  
      -ms-transition: box-shadow 0.3s ease-out;  
       -o-transition: box-shadow 0.3s ease-out;  
          transition: box-shadow 0.3s ease-out;  
}

#wtransition:focus {
outline: 0;
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
box-shadow: 0 0 4px #000;
}


h1 { font-size: 2em; font-weight: bold; margin: 15px 0 10px; }
textarea { padding: 7px; border: 1px solid #000; margin: 5px 0; font-size: 1em; width: 400px; }