JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="main"></div>
<div class="sidebar"></div>

CSS

.main{
     background: #ffd100;        
     width:400px;
     display:inline-block;
}
.sidebar{
     background: #c00;
     width:300px;
     display:inline-block;
}
.main, .sidebar {
    height: 250px;
}
 
/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.main{
    width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;
 
/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;
 
/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
.sidebar{
    width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;
 
/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;
 
/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
}