JSFiddle - React, Tailwind, and code Playground

by aaronjensen

HTML

<!doctype html>

<head>
</head>
<body>
   <div id="outer">
   <div id="container">
       <div class="row">
           <div class="inner">Hello World</div>
       </div>
    </div>
    </div>
</body>

CSS

#outer {
    min-width: 300px;
    overflow-x: hidden;
}

#container {
    width: 300px;
    margin: 0px auto;
    background: gray;
    height: 500px;    
}

.row {
    width: 350px;
    background: blue;
    margin-left: -25px;
}

.inner {
    background: yellow;
    margin-left: 25px;
    width: 300px;
    height: 100px;
}

@media screen and (min-width: 301px) {
    body {
        //overflow-x: hidden;
    }
}