JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="top"></div>
     <div class="bottom"></div>
</div>

CSS

.box {
    height: 100px;
    width: 100px;
    display: block;
    background: grey;
    position: relative;
}

.top {
    background: red;
    position:absolute;
    top: 0;
    height: 10px;
        width: 100px;
}

.bottom {
    background: red;
    position:absolute;
    bottom: 0;
        width: 100px;
    height: 10px;
}