JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>

CSS

body {
    background-color: purple;
}   

div {
    margin:0;
    padding:0;
    background-color: violet;
}

#footer {
    height: 100px;
}

#bottom-line-left, #bottom-line-right {
    display: inline-block;
    height: 20px;
}

#bottom-line-left {
    width: 61%;
}

#bottom-line-right {
    float: right;
    width: 37%;
}

#triangle {
    margin-left:-6px;
    margin-right: -4px;
    padding:0;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid purple;
}