JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle1">
<div class="triangle1Text">Text1</div>
</div>

<div class="triangle2">
<div class="triangle2Text">Text2</div>
</div>

CSS

.triangle1 {
    border-right: 150px solid transparent;
    border-bottom: 150px solid #4c4c4c; 
    position: fixed;
    width:0;
    height:0;
}
.triangle2 {
    border-left: 150px solid transparent;
    border-top: 150px solid #4c4c4c; 
    position: fixed;
    margin-left: 3px;
    width:0;
    height:0;
}

.triangle1Text {
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
    padding-top: 100px;
}

.triangle2Text {
   color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: -75px;
    margin-top: -120px;
}