JSFiddle - React, Tailwind, and code Playground

HTML

<div id="messagebox">
    <b class="rtop">
        <b class="r1"></b> 
        <b class="r2"></b> 
        <b class="r3"></b> 
        <b class="r4"></b>
    </b>
    <div id="statusText">Hello World!</div>
    <b class="rbottom">
        <b class="r4"></b> 
        <b class="r3"></b> 
        <b class="r2"></b> 
        <b class="r1"></b>
    </b>
</div>

CSS

#messagebox
{ 
    margin: 1% 30%;
    background: #aa0000;    
    text-align:center; 
    width:400px;
}

#statusText
{ 
    padding:8px; 
    font-size:12px; 
    color:#FFFFFF
}

b.rtop, b.rbottom
{
    display:block;
    background: #FFF
}
b.rtop b, b.rbottom b
{
    display:block;
    height: 1px;
    overflow: hidden; 
    background:#aa0000; 
}
.r1
{
    margin: 0 5px;
}
.r2
{
    margin: 0 3px;
}
.r3
{
    margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4
{
    margin: 0 1px;
    height: 2px;
}