JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="scroll-container">
  <div class="scrollbar"></div>
  <div class="content">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>
    <div class="item">Item 16</div>
    <div class="item">Item 17</div>
    <div class="item">Item 18</div>
    <div class="item">Item 19</div>
    <div class="item">Item 20</div>
  </div>
</div>

CSS

body {
  font-family: 'Lato', 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
}

.scroll-container {
  max-width: 60vw;
  max-height: 300px;
  position: relative;
  margin: 25px auto;
  box-sizing: border-box;
}

.content {
  max-width: 60vw;
  max-height: 300px;
  overflow: auto;
  border: 1px dashed;
  position: relative;
  z-index: 0;
}

.scrollbar {
  position: absolute;
  height: 100%;
  background-color: #fff;
  width: 12px;
  border: 1px dashed;
  border-left: none;
  right: 0px;
  top: 0;
  z-index: 3;
  opacity: .8;
}

.item {
  padding: 1rem .5rem;
}

.item:not(:first-child) {
  border-top: 1px dashed;
}