JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="in-warp">
        <div id="in"></div>
    </div>
</div>

CSS

#container {
    width: 80%; /*800px*/
    height: 200px;
    margin: 0 auto;
    background-color: #ccc;
}

#in-warp {
    width: 25%; /*200px*/
    height: 200px;
}

#in {
    height: 200px;
    margin-left: 5%; /*10px*/
    padding-left: 6%; /*12px*/
    background-color: green;
}