JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Zum Test eine Ăśberschrift</h1>

CSS

h1 {
    display: inline-block;
    padding: 0 0 25px;
    position: relative;
}

h1::after {
    background: none;
    background: -moz-linear-gradient(left, yellow 0%, yellow 30%, white 30%, white 34%, red 34%, red 64%, white 64%, white 68%, blue 68%, blue 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,yellow), color-stop(30%,yellow), color-stop(30%,white), color-stop(34%,white), color-stop(34%,red), color-stop(64%,red), color-stop(64%,white), color-stop(68%,white), color-stop(68%,blue), color-stop(100%,blue));
    background: -webkit-linear-gradient(left, yellow 0%, yellow 30%, white 30%, white 34%, red 34%, red 64%, white 64%, white 68%, blue 68%, blue 100%);
    background: -o-linear-gradient(left, yellow 0%, yellow 30%, white 30%, white 34%, red 34%, red 64%, white 64%, white 68%, blue 68%, blue 100%);
    background: -ms-linear-gradient(left, yellow 0%, yellow 30%, white 30%, white 34%, red 34%, red 64%, white 64%, white 68%, blue 68%, blue 100%);
    background: linear-gradient(to right, yellow 0%,yellow 30%,white 30%,white 34%,red 34%,red 64%,white 64%,white 68%,blue 69%,blue 100%);
    
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
    
    content: '';
    height: 20px;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
}