JSFiddle - React, Tailwind, and code Playground

by Filipp Dernovoy

HTML

<div class="separator">
    <span>Настраивайте панель действий, перетаскивая элементы между областями</span>
</div>

CSS

html {
    height: 100%;
}
body {
    background: repeating-linear-gradient(-45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
    height: 100%;
}
.separator {
    text-align: center;
    position: relative;
    font-family: arial;
    overflow: hidden;
}
.separator span {
    padding: 0 6em;
    display: inline-block;
    position: relative;
    color: #ddd;
}
.separator span::before, .separator span::after {
    content:"↓↑";
    position: absolute;
    top: 50%;
    width: 100em;
    height: 1px;
    font-size: 20px;
    line-height: 20px;
    color: #999;
    margin-top: -12px;
    letter-spacing: -.2em;
}
.separator span::before {
    text-align: right;
    box-shadow: -1em 12px 0 #999;
    left: -95.7em;
}
.separator span::after {
    text-align: left;
    box-shadow: 1.2em 12px 0 #999;
    right: -95.5em;
}