JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='np_roof'>
    <div class='np_chimney'></div>
</div>

CSS

.np_roof {
   width: 0;
   border-top: 40px solid transparent;
   border-bottom: 40px solid black;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   margin-top : -40px;
   position:relative;
}
.np_roof:before {
    content:"";
    position:absolute;
    left:-30px;
    top: 35px;
    width: 30px;
    border : 15px solid black;
}
.np_roof:after {
    content:"";
    position:absolute;
    width : 0;
    left:-8px;
    top: 47px;
    border : 8px solid white;
    border-top : 15px solid white;    
}
.np_chimney {
   position: absolute;
   background-color : black;   
   width : 12px;
   height : 40px;
   margin-left: 15px;
   margin-top : 10px;
}

JavaScript

//TheNounProject - Home by Amit Gharat