JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div id="outside">
    <div id="liquid">
        
    </div>
    <div id="contact">
    </div>
</div>

CSS

#outside {
    border:4px solid black;
    width:350px;
    position:relative;
    border-radius:10px;
}

#liquid {
    width:4px;
    height:70px;
    background:red;
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
    
}

 #outside:hover #liquid {width:350px;background:green;   }

#contact {background:black;width:10px;height:35px;position:absolute;top:17.5px;right:-12px;
}

*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
color .50s linear,
background-color .50s linear,
border-color .50s linear;
transition:
color .50s linear,
background-color .50s linear,
border-color .50s linear;
}