JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1"></div>
        <div id="box2"></div>

CSS

html {
                /* force scrollbars */
                height: 101%;
            }
            body {
                margin: 0;
            }
            #box1,
            #box2 {
                float: left;
                width: 400px;
                height: 200px;
            }
            #box1 {
                background: #ce0000;
            }
            #box2 {
                background: #8e0000;
            }

            @media all and (max-width: 799px) {
                #box1,
                #box2 {
                    width: 300px;
                }
            }