JSFiddle - React, Tailwind, and code Playground

HTML

<h1>text-align:right;</h1>

<div style='text-align:right;'>Hello There!</div>

<h1>RTL</h1>

<div dir="RTL">Hello There!</div>

<h1>RTL - BDI</h1>

<div dir="RTL">
    <bdi>Hello There!</bdi>
</div>

<h1>RTL - BDO</h1>

<div dir="RTL"> <bdo>
      Hello There!
   </bdo>

</div>

<h1>LTR</h1>

<div dir="LTR">Hello There!</div>

<h1>LTR - BDI</h1>

<div dir="LTR">
    <bdi>Hello There!</bdi>
</div>

<h1>LTR - BDO</h1>

<div dir="LTR"> <bdo>
      Hello There!
   </bdo>

</div>