JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body{
    background: url(http://www.crazymonkeydefense.com/wp-content/uploads/2014/03/black-hd-background-background-wallpapers-abstract-photo-cool-black-background.jpg) black;
    color: white;
    padding: 20px;
}
h1 {
    display: inline-block;
    padding: 0 0 25px;
    position: relative;
}

h1::after {
    background: none;
    background: -moz-linear-gradient(left, yellow 0%, yellow 30%, transparent 30%, transparent 34%, red 34%, red 64%, transparent 64%, transparent 68%, blue 68%, blue 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,yellow), color-stop(30%,yellow), color-stop(30%,transparent), color-stop(34%,transparent), color-stop(34%,red), color-stop(64%,red), color-stop(64%,transparent), color-stop(68%,transparent), color-stop(68%,blue), color-stop(100%,blue));
    background: -webkit-linear-gradient(left, yellow 0%, yellow 30%, transparent 30%, transparent 34%, red 34%, red 64%, transparent 64%, transparent 68%, blue 68%, blue 100%);
    background: -o-linear-gradient(left, yellow 0%, yellow 30%, transparent 30%, transparent 34%, red 34%, red 64%, transparent 64%, transparent 68%, blue 68%, blue 100%);
    background: -ms-linear-gradient(left, yellow 0%, yellow 30%, transparent 30%, transparent 34%, red 34%, red 64%, transparent 64%, transparent 68%, blue 68%, blue 100%);
    background: linear-gradient(to right, yellow 0%,yellow 30%,transparent 30%,transparent 34%,red 34%,red 64%,transparent 64%,transparent 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%;
}