JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <hr class="line"/>
        <div class="content">This is a text</div> 
        <hr class="line"/>
    </div>

CSS

.container{
            width: 400px;
            height: 100px;
            text-align: center;
            background-color: yellow;
            display: flex;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;

            align-items: center;
        }
        .line {
            border: 0;
            border-bottom: dashed 1px #C7C9C7;
            width: 38%;
        }
        .content {
            background-color: red;
        }