JSFiddle - React, Tailwind, and code Playground

by alanhogan

HTML

<hr class="x" />
<hr class="x y" />
<hr class="x y xx" />

CSS

.x {
    border: none;
    width: auto;
    margin: 0 auto;
}
.x:before {
    content:"~~~~";
    letter-spacing: -0.16em;
    width: 2.1em;
    margin: 0 auto;
    display: block;
    text-align: center;
    background: -webkit-linear-gradient(left, purple, fuchsia, #f70, green, #022088);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.x.y:before {
    content: "•••••";
    letter-spacing: 0.1em;
}
.x.y.xx:before {
    content: "×××××";
    font-size: 0.67em;
    width: 3.5em;
}
body {
    background-color: black;
    font-family: helvetica, arial, sans-serif;
    font-size: 32px;
}

JavaScript

Pure-CSS old-school-style fancy HRs.