JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<textarea>Aenean consequat molestie dolor. Vivamus porttitor justo justo. Donec pharetra euismod molestie. Mauris vestibulum libero eu tellus rutrum tempor. Proin vulputate augue et lacus condimentum eget congue justo ultricies. Morbi bibendum commodo dolor, ut gravida sapien posuere non. Praesent consequat enim eget tortor bibendum at pellentesque justo varius. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium.</textarea>

CSS

textarea {
    font-size: 20px;
    height: 400px;
    width: 500px;
    
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
        -ms-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}

textarea:focus {
    font-size: 10px;
    height: 200px;
    width: 500px;  
}