JSFiddle - React, Tailwind, and code Playground

by khamer

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;
        left: 0;
        top: 0;
        height: 40px;
        transform: translate(-50%) rotate(-90deg);
        transform-origin: top;
        width: 100%;
    }
}