JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div class="gradient">
</div>
<div class="list">
  <div>#9abaf9</div>
  <div>#c6b2f7</div>
  <div>#f1c5e7</div>
  <div>#e9d6e6</div>
  <div>#c3e8e8</div>
  <div>#97e0f1</div>
  <div>#becaf5</div>
  <div>#ebbded</div>
  <div>#edbcec</div>
  <div>#efbbeb</div>
  <div>#ddbcf1</div>
</div>

CSS

* { box-sizing: border-box; }
body { font-family: system-ui; }

body {
  display: flex;
  gap: 2px;
}
.list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.list div {
  padding: 5px;
  background-image: url('https://images.ctfassets.net/ss5kfr270og3/65NeXxn5rniKe44syqCxcw/8ae44d7c4d3258fb1e1ba8473f3aa2b3/Frame_2147238216.png');
}
.list div:nth-child(1) { background-position-y: 0%; }
.list div:nth-child(2) { background-position-y: 10%; }
.list div:nth-child(3) { background-position-y: 20%; }
.list div:nth-child(4) { background-position-y: 30%; }
.list div:nth-child(5) { background-position-y: 40%; }
.list div:nth-child(6) { background-position-y: 50%; }
.list div:nth-child(7) { background-position-y: 60%; }
.list div:nth-child(8) { background-position-y: 70%; }
.list div:nth-child(9) { background-position-y: 80%; }
.list div:nth-child(10) { background-position-y: 90%; }
.list div:nth-child(11) { background-position-y: 100%; }

.gradient {
  padding: 5px;
  width: 60px;
  background: linear-gradient(
    180deg,
    #9abaf9 0%,
    #c6b2f7 10%,
    #f1c5e7 20%,
    #e9d6e6 30%,
    #c3e8e8 40%,
    #97e0f1 50%,
    #becaf5 60%,
    #ebbded 70%,
    #edbcec 80%,
    #efbbeb 90%,
    #ddbcf1 100%
  );
}