JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<ul class="ltr">
    <li>A ></li>
    <li>B ></li>
    <li>C ></li>
    <li>D ></li>
  </ul>

  <ul class="rtl">
     <li>A ></li>
    <li>B ></li>
    <li>C ></li>
    <li>D ></li>
  </ul>

CSS

ul.ltr, ul.rtl{list-style-type:none; display:flex;}

ul.ltr li, ul.rtl li {padding:4px;}

/*making the arrow right to left*/
ul.rtl{ direction:rtl; unicode-bidi:bidi-override; }