JSFiddle - React, Tailwind, and code Playground

HTML

<span class="test"></span>

CSS

span{
    display:block;
    position:relative;
    width:150px;
    height:100px;
    background:#ddd;
} 

.test:before{
    content:'';
    display:block;
    position:absolute;
    width:100px;
    height:1px;
    top:0;
    left:0;
    background:#333;
}

.test:after{
    content:'';
    display:block;
    position:absolute;
    width:180px;
    height:1px;
    bottom:0;
    left:0;
    background:#f0f;
}