JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<div id="svg-container" style="width:100%;height:100%;">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <polygon points="0,0 0,100 30,20" fill="red" opacity="0.4"/>
        <polygon points="30,0 30,20 60,0" opacity="0.3"/>
        <polygon points="60,0 60,0 90,30" opacity="0.2"/>
    </svg>
    <div class="header">
      <h2>
      smalt-it
      </h2>
    </div>
    </div>
</div>

CSS

.header h2 {
 position: absolute;
 top: 25%;
 left:25%;
 font-size: 65px;
}