JSFiddle - React, Tailwind, and code Playground

HTML

<p>This one has it fliped and is rtl, making each letter backwards. Note that the capital "T" is still on the left.<br>&nbsp;</p>
<span class="a">Test number one.</span><br>&nbsp;
<p>This one is simply fliped. Note the capital "T" is now on the right, and the period on the left, as well as each letter being fliped (look at the "b" in "number".)</p>
<br>
<span class="b">Test number two.</span><br>&nbsp;
<p>This one is only rtl. The capital "T" is still on the right, but the letters aren't flipped (again, note the "b").</p>
<br>
<span class="c">Test number three.</span><br>&nbsp;
<p>This one is unchanged.</p>
<br>
<span class="d">Test number four.</span><br><br>

CSS

body { padding: 20px; } 

span {display:inline-block;
      border:1px solid red;
      padding:3px;}

.a {-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     transform:rotateY(180deg);
     unicode-bidi:bidi-override;
     direction:rtl;}

.b {-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     transform:rotateY(180deg);}

.c {unicode-bidi:bidi-override;
    direction:rtl;}