JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div>
    <a href="#"></a>
</div>

CSS

html,body{
    height:100%;
    margin:0;
    padding:0;
}
div{
    height:50%;
    border:10px solid lightgrey;
    position:relative;
    overflow:hidden;
}
a{
    position:absolute;
    bottom:0;
    width:100%; height:20%;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}