JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<div id="container">
   <div id="scroller">
        <ul>
          <li>
              <p>1</p>
          </li>
          <li>
              <p>2</p>
          </li>
          <li>
              <p>3</p>
          </li>
          <li>
              <p>4</p>
          </li>
          <li>
              <p>5</p>
          </li>
          <li>
              <p>6</p>
          </li>
          <li>
              <p>7</p>
          </li>
          <li>
              <p>8</p>
          </li>
          <li>
              <p>9</p>
          </li>
          <li>
              <p>10</p>
          </li>
          <li>
              <p>11</p>
          </li>
          <li>
              <p>12</p>
          </li>
          <li>
              <p>13</p>
          </li>
          <li>
              <p>14</p>
          </li>
          <li>
              <p>15</p>
          </li>
        </ul>  
   </div>
</div>

CSS

#container {
 overflow: hidden;
 width: 200px;
 height: 100px;
 margin: 30px;
 border: 1px solid black;   
}

#scroller {
 overflow: scroll;
 width: 213px;
 height: 115px;    
}