JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    
	<li>
	Original <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>
	Flip Horizontal <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>
	Flip Vertical <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-vert" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>  
	Flip Verical + Horizontal <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor-vert" height="100" alt="">
	</li>
    
</ul>

CSS

ul {
    list-style:none;
}

.img-hor {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.img-hor-vert {
        -moz-transform: scale(-1, -1);
        -o-transform: scale(-1, -1);
        -webkit-transform: scale(-1, -1);
        transform: scale(-1, -1);
}