JSFiddle - React, Tailwind, and code Playground

by Vivekk Upadhyay

HTML

<div class="dashed-border"></div>

CSS

html, body {
    margin:0;
    padding: 30px 100px;
}
.dashed-border {
    position: relative;
    border-bottom: 3px dashed #fff;
}
.dashed-border::before {
    content:"";
    border-top:3px dashed #FFF;
    position: absolute;
    top:0;
    left:6px;
    right:0;
    width: 100%;
    height: 3px;
    z-index: 2;
}
.dashed-border:after {
    content:"";
    position: absolute;
    bottom: -3px;
    left: -3px;
}
.dashed-border::after {
    right: -3px;
    height: 3px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
    background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* IE10+ */
    background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* W3C */
}