JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div></div>

CSS

div
{
    width: 50px;
    height: 50px;
    background: red;
    opacity: 1;
    
    transition: 0.5s;
    -webkit-transition: 0.5s;
    /*    IDEAL TRANSITION
       
    transition: 0.5s opacity 0s;
    -webkit-traisition: 0.5s opacity 0;
    
    */
}

div.on
{
    width: 100px;
    height: 100px;
    background: green;
    opacity: 0.5;
}

textarea {    
  resize: none;    
  outline: none;
}

.expand {
  height: 8em;    
  width: 100%;   
  padding: 3px;    
  transition: 0.5s;   
  transition: background-color 1s;
  border-radius: 4px; 
  border: 1px solid #e5e6e7;

}
.expand:focus,
.expand:visited,
.expand:active {    
  height: 8em;    
  width: 100%;    
  padding: 3px;    
  transition: none;
  border: 1px solid #1ab394;    
}

JavaScript

$('div').click(function(){
    $(this).toggleClass('on')
})