JSFiddle - React, Tailwind, and code Playground

by Prithviraj mitra

HTML

<div class="container">
    <hr class="square gold">
    <p>some text</p>
</div>

CSS

hr.square {
    padding: 0 0 5px;
    border-top: 1px solid #000;
    color: #ddd;
    text-align: center;
}
hr.square:after {
    content:"◊◊";
    display: inline-block;
    position: relative;
    top: -1rem;
    font-size: 1.5em;
    padding: 0 1rem 0rem;
    background: transparent;
    font-family:"tahoma";
}
.container {
    background:#F5F5F5;
    padding:1rem;
    text-align:center;
}
hr {
    height:0;
    margin:0;
}