JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <ul id="nav">
        <li><img src="http://icons.iconarchive.com/icons/alecive/flatwoken/256/Apps-9gag-icon.png" /></li>
        <li><img src="http://icons.iconarchive.com/icons/alecive/flatwoken/256/Apps-aegisub-icon.png" /></li>
        <li><img src="http://icons.iconarchive.com/icons/alecive/flatwoken/256/Apps-airdroid-icon.png" /></li>
    </ul>    
</div>

CSS

#sidebar {
    width: 250px;
    background: green;  
    height:100%; 
    position: absolute; 
    left: 0;
    padding-bottom: 100px;
    -webkit-transition: width 0.5s ease;
}
#nav {
    list-style:none; 
    margin: 0; 
    padding: 100px 20px;
}

#nav img {
    width: 100px;
}  


@media all and (max-width: 700px) {
    #sidebar {
        width:100px;
    } 
    #nav img {
     width: 50px;
    -webkit-animation-name: comeBackSmaller;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    } 
     @-webkit-keyframes comeBackSmaller {  
    0% { opacity: 1.0; width: 100px; }
    25% { opacity: 0.0; width: 75px; }
    50% { opacity: 0.0; width: 25px; }
    100% { opacity: 1.0; width: 50px; }
}
}


@media all and (min-width: 700px) {
    #nav img {
     width: 100px;
    -webkit-animation-name: comeBackBigger;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    }  
    @-webkit-keyframes comeBackBigger {  
    0% { opacity: 1.0; width: 50px; }
    25% { opacity: 0.0; width: 25px; }
    50% { opacity: 0.0; width: 75px; }
    100% { opacity: 1.0; width: 100px; }
}
}