JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base">
<div class="test t1"></div>
<div class="test t2"></div>
<div class="test t3"></div>
<div class="test t4"></div>
</div>

CSS

.base {
  width: 300px;
  height: 650px;
  overflow: hidden;
  position: relative;
}

.test {
  width: 300px;
  height: 200px;
  background-image: url(http://des1re.tk/img/Katarina_noBG_darkblue.png);
  background-size: 100%;
  position: absolute;
}

.t1 {
  top: 0px;
  background-position: 0px 0px;
  filter: sepia(100%) saturate(200) hue-rotate(40deg);
}
.t2 {
  top: 200px;
  background-position: 0px -200px;
  filter: sepia(100%) saturate(200) hue-rotate(130deg);
}
.t3 {
  top: 400px;
  background-position: 0px -400px;
  filter: sepia(100%) saturate(200) hue-rotate(220deg);
}
.t4 {
  top: 600px;
  background-position: 0px -600px;
  filter: sepia(100%) saturate(200) hue-rotate(310deg);
}