JSFiddle - React, Tailwind, and code Playground

HTML

<h2>transform: rotate(180deg);</h2>
<section class="a"><img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="eins"><br>
<img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="zwei"></section>

<h2>transform: scaleX(-1)</h2>
<section class="b">
    <img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="eins">
<img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="drei"></section>

<h2>transform: scaleX(-1)</h2>
<section><img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="eins"><br>
<img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" class="vier"></section>

CSS

body {
  background-color: #E6E6E7;
  font: 80% sans-serif;
}
img {
  width: 180px;
}
section {
  padding: 1em;
  
}
h2 {
  clear: left;
}
.b .eins, .b .drei {
  float: left;
  padding: 10px;
}
.zwei {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.drei {
  float: left;
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.vier {
  -ms-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}