JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="wrapper">
      <div style="display: flex; justify-content: center; overflow: auto; padding: 30px 0">
      <div style="padding: 0 15px">AAAAAA</div>
      <div style="padding: 0 15px">BBBBBB</div>
      <div style="padding: 0 15px">CCCCCC</div>
      <div style="padding: 0 15px">DDDDDDD</div>
      <div style="padding: 0 15px">EEEEEEE</div>
      <div style="padding: 0 15px">FFFFFFF</div>
      <div style="padding: 0 15px">GGGGGGG</div>
      <div style="padding: 0 15px">HHHHHHH</div>
      <div style="padding: 0 15px">iiiiiii</div>
      <div style="padding: 0 15px">JJJJJJJ</div>
      <div style="padding: 0 15px">KKKKKKK</div>
      <div style="padding: 0 15px">LLLLLLL</div>
      <div style="padding: 0 15px">MMMMMMM</div>
      <div style="padding: 0 15px">OOOOOOO</div>
    </div>

</div>
<div style="text-align: center">Scroll horizontally the letters above.</div>