JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button button1">Me!</div>
<br>
<div class="button button1">Me!</div>
<br>
<div class="button button1">Me!</div>
<br>
<div class="button button1">Me!</div>
<br>
<div class="button button2">Me!</div>
<br>
<div class="button button3">Me!</div>
<br>
<div class="button button2">Me!</div>
<br>
<div class="button button4">Me!</div>
<br>

CSS

.button {
    height:100px;
    width:200px;
    text-align:center;
    vertical-align:middle;
    line-height:100px;
    border-radius:10px;
    -webkit-filter:
}
.button:hover {
    -webkit-filter: saturate(3);
    filter: saturate(3);
}
.button1 {
    background-color:black;
    color:white;
}
.button2 {
    background-color:purple;
}
.button3 {
    background-color:green;
}
.button4 {
    background-color:orange;
}