JSFiddle - React, Tailwind, and code Playground

by Mariya Gnitetckaya

HTML

<div class="line"></div>
<div class="wrapper"> <h1>wrapper</h1></div>

CSS

body{width: 100%;}
.line{
    /* градиент из 2х цветов - 50% белый/50% синий */
    background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 3%, #ffffff 50%, #1e5799 51%, #1e5799 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(3%,#ffffff), color-stop(50%,#ffffff), color-stop(51%,#1e5799), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(left,  #ffffff 3%,#ffffff 50%,#1e5799 51%,#1e5799 100%);
background: -o-linear-gradient(left,  #ffffff 3%,#ffffff 50%,#1e5799 51%,#1e5799 100%);
background: -ms-linear-gradient(left,  #ffffff 3%,#ffffff 50%,#1e5799 51%,#1e5799 100%);
background: linear-gradient(to right,  #ffffff 3%,#ffffff 50%,#1e5799 51%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1e5799',GradientType=1 );
    position: absolute;
    width: 100%;
    height: 4px;
    z-index: -1; 
}
.wrapper{
    border-top: 4px solid #1e5799;
    width: 500px;
    margin: 0 auto;
    height: 100px;
    border-right: 1px solid red;
    border-left: 1px solid red;
}
h1{
    color: red;
    padding: 20px 0;
    text-align: center;
}