JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1" class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>
<div id="box2" class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>
<div id="box3" class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>
<div id="box4" class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS

.box {
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
            padding: 50px;
            border: 2px solid red;
            overflow: hidden;
        }
        .box div {
            width: 100px;
            height: 100px;
            border: 2px solid black;
        }
        .one {
            background-color: blue;
        }
        .two {
            background-color: yellow;
        }
        #box1 .one {
 margin-top: -170px;
                }
        #box2 .one {
            margin-bottom: -50px;
        }
        #box3 div {
            float: left;
        }
        #box3 .one {
            margin-right: -50px;
        }
        #box4 div {
            float: left;
        }
        #box4 .one {
            margin-left: -50px;
        }