JSFiddle - React, Tailwind, and code Playground

by MrRio

HTML

<hr class=style-six>

CSS

body{
    padding:50px;
    background-color:#333;
    color:#fff;
}

hr.style-six{
    padding:0;
    border:none;
    height: 2px;
    background-image: -moz-linear-gradient(left , rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, rgba(255,255,255,0)),
        color-stop(0.5, rgba(255,255,255,1)),
        color-stop(1, rgba(255,255,255,0))
    );
    color:#fff;
}
    hr.style-six:after{
        content:"§";
        display:block;
        text-align:center;
        font-size:1.5em;
        line-height:0;
        margin-top:-0.5em; /* Pull it back up by half. */
    
        text-shadow:1px 0 0 #333,-1px 0 0 #333,2px 0 0 #333,-2px 0 0 #333,3px 0 0 #333,-3px 0 0 #333; /* Same colour as page's background. */
    }