JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<img src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-horizontal" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-vertical" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-rotate-left" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-rotate-right" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-rotate-full" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-horizontal fileinput-rotate-left" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-horizontal fileinput-rotate-right" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-vertical fileinput-rotate-left" src="http://octodex.github.com/images/baracktocat.jpg">
<img class="fileinput-flip-vertical fileinput-rotate-right" src="http://octodex.github.com/images/baracktocat.jpg">

CSS

html, body {
    min-height: 100%;
}
img {
    max-width: 30%;
}

.fileinput-flip-horizontal {
    -ms-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
}
.fileinput-flip-vertical {
    -ms-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipY;
}
.fileinput-rotate-left {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-rotate-right {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.fileinput-rotate-full {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.fileinput-flip-horizontal.fileinput-rotate-left {
    -ms-transform: scaleX(-1) rotate(-90deg);
    -webkit-transform: scaleX(-1) rotate(-90deg);
    transform: scaleX(-1) rotate(-90deg);
    filter: FlipH progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-flip-horizontal.fileinput-rotate-right {
    -ms-transform: scaleX(-1) rotate(90deg);
    -webkit-transform: scaleX(-1) rotate(90deg);
    transform: scaleX(-1) rotate(90deg);
    filter: FlipH progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.fileinput-flip-vertical.fileinput-rotate-left {
    -ms-transform: scaleY(-1) rotate(-90deg);
    -webkit-transform: scaleY(-1) rotate(-90deg);
    transform: scaleY(-1) rotate(-90deg);
    filter: FlipY progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-flip-vertical.fileinput-rotate-right {
    -ms-transform: scaleY(-1) rotate(90deg);
    -webkit-transform: scaleY(-1) rotate(90deg);
    transform: scaleY(-1) rotate(90deg);
    filter: FlipY...