JSFiddle - React, Tailwind, and code Playground

by aka_SKIff

HTML

<div class="wrapper">
    <div class="left">Left</div>
    <div class="right">right</div>
    <div class="center">Center</div>
    <div class="center-big">Center Big</div>
    <div class="left">Left</div>
</div>

SCSS

.wrapper {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
    background: lightyellow;
}

.center {
    width: 380px;
    overflow: hidden;
    height: 100px;
    margin-bottom: 10px;
    background: #aaa;
}

.center-big {
    overflow: hidden;
    width: 380px;
    margin-left: 10px;
    margin-right: 10px;
    height: 300px;
    background: lightblue;
}
.left {
    margin-right: 10px;
    width: 200px;
    float: left;
    height: 200px;
    margin-bottom: 10px;
    background: yellow;
}
.right {
    float: right;
    height: 400px;
    width: 200px;
    background: pink;
    margin-left: 10px;

}

@media (max-width: 800px) {
    div {
        float:none;
        overflow: inherit;
    }
    .wrapper {
         width: 600px;   
    }
    .main {
        width: 600px;
    }
    .cross {
        width: 600px;
    }
    .design {
        width: 600px;
    }
    .history {
        width: 600px;
    }
}