JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script>
<div id="something"></div>
<div id="other"></div>
CSS
#something {
height: 200px;
width: 300px;
position: absolute;
left: 30px;
top: 30px;
}
#other {
height: 150px;
width: 300px;
position: absolute;
left: 30px;
top: 250px;
}
JavaScript
function addTriangleTo(target) {
var dimensions = target.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
target.appendChild(pattern.canvas());
}
addTriangleTo(document.getElementById('something'));
addTriangleTo(document.getElementById('other'));