JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="example-four">
    <a href="#" id="text">BUTTON</a>
</div>

CSS

#example-four {
    position: absolute;
    width: 50px;
    height: 100px;
    border-radius: 5px 20px 5px;
    background: #BADA55;
    text-align: center;
    cursor: pointer;
}

#text{
    display: block;
    margin-top: 45px;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
}