JSFiddle - React, Tailwind, and code Playground

by aaccioly

HTML

<div id="main">
    <div id="div1" class="col1">Div 1</div><div id="div2" class="diagonal">Div 2</div><br/>
    <div id="div3" class="col1 row2 diagonal">Div 3</div><div id="div4" class="row2">Div 4</div>
</div>

CSS

#main {
    display: inline-block;
    border: 1px solid;
}
#main div {
    display: inherit;
    border: 2px solid;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 50px;
}
.diagonal {
    background: 
        linear-gradient(to top left, 
            rgba(255, 0, 0, 0) 0%, 
            rgba(255, 0, 0, 0) calc(50% - 3px), 
            rgba(255, 0, 0, 1) 50%, 
            rgba(255, 0, 0, 0) calc(50% + 3px), 
            rgba(255, 0, 0, 0) 100%);
}
#main div.col1 {
    width: 150px;
}
#main div.row2 {
    height: 60px;
}