JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div id="top">
    some text 1
</div>
<div id="middle">
    some text 2
</div>
<div id="bottom">
    some text 3
</div>

CSS

#top {
    width: 220px;
    float: left;
    padding: 5px 8px 5px 8px;
    margin-left: 8px;
   background:yellow;
}

#middle {
    width: 452px; 
    float: left;
    padding: 5px 8px;
    margin: 0px 5px 5px 5px;
    background:green;
}

#bottom {
    width: 220px;
    padding: 5px 5px;
    float: left;
        background: lightgreen;
}

/*MEDIA QUERIES*/
/* for 980px or less */
@media screen and (max-width: 980px) {
    #top {
        width: 40%;

    }
    #middle {
        width: 55%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        padding: 1% 2%;
        width: auto;
        float: none;
    }
}

/* for 900px or less */
@media screen and (max-width: 900px) {
    #top {
        width: 39%;
    }
    #middle {
        width: 55%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        width: auto;
        float: none;
    }
}

/* for 800px or less */
@media screen and (max-width: 800px) {
    #top {
        width: 33%;
    }
    #middle {
        width: 59%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        width: auto;
        float: none;
    }

}

/* for 600px or less */
@media screen and (max-width: 600px) {
    #top {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        padding: 5px 10px;
       float:none;text-align:right;
        margin: 0px 5px 5px 5px;
    }

    #bottom {
        width: auto;
        float: none;
    }        
}

/* for 480px or less */
@media screen and (max-width: 480px) {

    h1 {
        font-size: 24px;
    }
}

/* border & guideline */


img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/*Responsive Layout Style End */