JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div></div>

<section></section>

SCSS

div {
    background-color: gold;
    width:300px;
    height: 150px;
    margin-bottom: 40px;
    position: relative;
    &::before {
        background: red;
        box-shadow: inset 0 0 0 1px black;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 40px;
        width: 100%;
    }
}

section {
    background-color: gold;
    width:300px;
    height: 150px;
    position: relative;
    &::before {
        background: rgba(green, 0.25);
        box-shadow: inset 0 0 0 1px black;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 90px;
        transform-origin: top left;
        transform: rotate(90deg) translateY(-100%);
//        transform: rotate(0deg);
        width: 100%;
    }
}