JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

CSS

div {
    margin-bottom: 10px;
}
.one {
    height: 1px;
    background: white;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
.two {
    height: 1px;
    background: white;
    border-top: 3px double red;
}
.three {
    height: 1px;
    background: red;
    box-shadow: 0 1px 0 1px white, 0 2px 0 1px red;
}
.four {
    height: 3px;
    background: linear-gradient(to bottom, red 0%, red 30%, white 30%, white 60%, red 60%, red 100%);
}