JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="tiles">
            <div id="houses">
        <div class="house">
        <div class="roof" onload="roofcolor(this)"></div>
        <div class="contents">
        <span>text</span>
        <small>text</small>
        <br/>
        <br/>
        <span>text</span>
        <small>text</small>
        <br/>
        <br/>
        </div></div></div>
        </div>

        <div class="house">
            <div class="roof"></div>
        <div class="contents">
        <span>text</span>
        <small>text</small>
        <br/>
        <br/>
        <span>text</span>
        <small>text</small>
        <br/>
        <br/></div></div>
                <div class="house">
                <div class="roof"></div>
        <div class="contents">
        <span>text</span>
        <small>text</small>
        <br/>
        <br/>
        <span>text</span>
        <small>text</small>
        <br/>
        <br/></div></div>

CSS

.roof{
    margin: auto;
	width: 0px;
height: 0px;
border-style: solid;
border-width: 0 205px 80px 205px;
border-color: transparent transparent #2D89EF transparent;
-webkit-transform:rotate(360deg);
opacity: 0.7;
}
.houses { width: auto;
         height: auto;
         position: relative;
         text-align: center;
         margin: 0 20px 20px 0;
         /*border: 3px solid #1AA11A;*/
}
.house { width: auto;
         height: auto;         
         position: relative;
         display:inline-block;
         text-align: center;
         margin: 0 20px 20px 0;
         /*border: 3px solid #1AA11A;*/
}
.contents { width: 90%;
       height: auto;
       max-height: 400px;
       margin: auto;
       /*border: 3px solid #F03030;*/
       background-color: #cc8100;
}

JavaScript

function roofcolor(roof)
{
document.getElementByClassName("roof").style.border-bottom-color = document.getElementByClassName("contents").style.background-color;
}