JSFiddle - React, Tailwind, and code Playground

by Michael Dibbets

HTML

<div id="red">
    <div id="yellow1">
        <span>1</span>
    </div>
    <div id="yellow2">
        <span>2</span>
    </div>
</div>
<div id="black">
    <div id="green1">
        <span>1</span>
    </div>
    <div id="green2">
        <span>2</span>
    </div>
    <div id="green3">
        <span>3</span>
    </div>
</div>
<div id="blue">
    <div id="purple1">
        <span>1</span>
    </div>
    <div id="purple2">
        <span>2</span>
    </div>
    <div id="purple3">
        <span>3</span>
    </div>
</div>

CSS

span
    {
        display:inline-block;
        margin: 50px 50px;
        font-size:4em;
        font-weight:800;
        text-shadow: 3px 3px 10px gray;
        font-family:sans-serif;
    }

#red {
    background-color:red;
    border: 1px solid brown;
    display:inline-block;
}
#yellow1, #yellow2
    {
    background-color:yellow;
    border: 1px solid lightbrown;
    }
#black
    {
    display:inline-block;
    border:1px solid black;
    background-color:gray;
    }
#green1, #green2, #green3
    {
    display:inline-block;
    background-color:lime;
    border:1px solid darkgreen;
    }
#blue
    {
    display:inline-block;
    border:1px solid darkblue;
    background-color:lightblue;
    }
#purple1, #purple2, #purple3
    {
    display:block;
    border: 1px solid darkpurple;
    background-color:purple;
    }
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
    width:600px;
}

#yellow1, #yellow2
    {
    width:250px;
    height:300px;
    margin:20px;
    float:left;
    }
#black
    {
    float:right;
    }
#green1, #green2, #green3
    {
    clear:both;
    float:right;
    width:200px;
    height:150px;
    margin:20px;
    }
#blue
    {
    width:600px;
    }
#purple1, #purple2, #purple3
    {
    width:150px;
    margin:25px;
    float:left;
    height:200px;
    }
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
    width:100%;
}
#yellow1, #yellow2
    {
    width:90%;
    margin:5%;
    float:left;
    }
#black
    {
    width:100%;
    }
#green1, #green2, #green3
    {
    width:90%;
    margin:5%;
    }
#blue
    {
    width:100%;
    }
#purple1, #purple2, #purple3
    {
   width:90%;
    margin:5%;
    }
}

JavaScript

/*











---------------------------------------------------------->>>>>>>>>>>>>
Slide the slider to see the different resolutions.
Threshold at 875px;

*/