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: red;
        box-shadow: inset 0 0 0 1px black;
        content: '';
        display: block;
        //position: absolute;
       
        height: 40px;
        transform: translate(40%, 50%) rotate(90deg);
       
        width: 100%;
    }
}