JSFiddle - React, Tailwind, and code Playground

HTML

<section dir="rtl">
    <div>
      <h1>This is an RTL block element</h1>
        <p>Please click on the middle mouse button to autoscroll horizontally. </p>
    </div>
</section>

<section dir="ltr">
    <div>
      <h1>This is an LTR block element</h1>
        <p>Please click on the middle mouse button to autoscroll horizontally. </p>
    </div>
</section>

CSS

section { overflow: auto; }

div { 
      padding: 2em; 
      margin: 2em;
      width: 400em;
      background: linear-gradient(45deg, rgba(255,0,0,0.5) 0%,rgba(0,255,0,0.5) 50%,rgba(0,0,255,0.5) 100%);
      border: 1px solid black; 
      box-shadow: 2px 2px 2px 2px black;

}