JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<div class="box">
<ul>
<li>Sample text 1</li>
<li>Sample text 2</li>
<li>Sample text 3</li>
<li>Sample text 4</li>
<li>Sample text 5</li>
<li>Sample text 6</li>
<li>Sample text 7</li>
<li>Sample text 8</li>
<li>Sample text 9 </li>
<li>Sample text 10</li>
<li>Sample text 11</li>
<li>Sample text 12</li>
<li>Sample text 13</li>
<li>Sample text 14</li>
<li>Sample text 15</li>
<li>Sample text 16</li>
<li>Sample text 17</li>
<li>Sample text 18</li>
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
</ul>
</div>

CSS

.box {
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  overflow-x: auto;
  overflow-y: hidden;
}
ul {
  list-style: none;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}
li {
  display: inline-block;
}