JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
</div>

CSS

.container {
        display: block;
        width: 600;
        position: absolute;        

    }

    .content {
        background: #e4e4e4;
        font-weight: bold;
        padding: 3px;
    }

    .round_span3 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }

    .round_span2 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }

    .round_span1 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }