JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<div class="rotate">Rotate me</div><div class="rotate_right">Rotate me</div>

CSS

.rotate {
text-align:center;
border:1px solid;
margin-top:20px;
margin-left:-25px;    
float:left;
background-color:#000;
 color:#fff;
padding:0px 25px;    
/* Safari */
-webkit-transform: rotate(-45deg);

/* Firefox */
-moz-transform: rotate(-45deg);

/* IE */
-ms-transform: rotate(-45deg);

/* Opera */
-o-transform: rotate(-45deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
.rotate_right {
    text-align:center;
border:1px solid;
float:right;
margin-top:20px;
margin-right:-25px;  
background-color:#000;
 color:#fff;
padding:0px 25px;     
/* Safari */
-webkit-transform: rotate(45deg);

/* Firefox */
-moz-transform: rotate(45deg);

/* IE */
-ms-transform: rotate(45deg);

/* Opera */
-o-transform: rotate(45deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}