JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

CSS

.item
{
  height:200px;
  display:inline-block;
  background:red;
  filter: grayscale(100%); 
  width:23%;
  transform: skewX(16deg);
}
.item:hover
{
  filter: grayscale(0); 
}