JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap-1">
    <div class="container-1"></div>
</div>
<div class="wrap-2">
    <div class="container-2"></div>
</div>

CSS

.wrap-1, .wrap-2 {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        background: #999;
    }
    .container-1, .container-2 {
        background: none repeat scroll 0 0 #000;
        height: 50px;
        margin: -20px 0 0 20px;
        position: absolute;
        width: 50px;
    }
    .wrap-1 {
        overflow: hidden;
    }