JSFiddle - React, Tailwind, and code Playground

HTML

<div id="design">
    <div id="responsive">Responsive</div>
    <div id="adaptive">Adaptive</div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #cfcfcf;
}

#design {
    margin: 10px;
}
#design > div {
    background-color: #fff;
    margin-bottom: 15px;
    padding: 15px;
}
.simulate {
     width: 320px;
}
#adaptive {
    width: 1000px;
}

@media (max-width: 640px) {
     #adaptive {
         width: 520px;
     }
}

@media (max-width: 320px) {
     #adaptive {
         width: 200px;
     }
}