JSFiddle - React, Tailwind, and code Playground

HTML

<dog class="black"></dog>

CSS

dog {
    display: block;
    background-image: url('https://snaek.org/resources/umbrella.svg');
    width: 128px;
    height: 128px;
    background-size: cover;
}

.black {
    background-position: 0 0;
}

.blue {
    background-position: 0 -25%;
}

.green {
    background-position: 0 -50%;
}

.pink {
    background-position: 0 -75%;
}

.moreblue {
    background-position: 0 -100%;
}

CoffeeScript

colours = [
           'blue'
           'green'
           'pink'
           'moreblue'
           'black'
]

dog = document.querySelector('dog')

dog.onclick = ->
  colour = colours.shift()
  dog.classList.remove(colours[colours.length - 1])
  dog.classList.add(colour)
  colours.push(colour)