JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class='content'>
    <div class='line-1'></div>
    <div class='line-2'></div>
    <div class='text'>Hello world</div><br/>
    <div class='text'>Hello world</div><br/>
    <div class='text'>Hello world</div><br/>
    <div class='text'>Hello world</div>    
</div>

CSS

.content {
    position: relative;
    width: 300px;
    height: 400px;
    background: #eee;
    text-align: center;
}
.line-1 {
    position: absolute;
    top: 20px;
    left: 0; right: 0;
    height: 4px;
    background: #000;
}
.line-2 {
    position: absolute;
    top: 20px; bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    background: #000;
}
.text {
    z-index: 2;
    position: relative;
    display: inline-block;
    background: #eee;
    margin-bottom: 10px;
    padding: 10px;
}