JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<div class="columns">
<div class="column"><a href="#"><img src="https://godofrockgame.com/wp-content/themes/godofrock/images/character-king2.png.webp" alt=""></a></div>
<div class="column"><img src="https://godofrockgame.com/wp-content/themes/godofrock/images/character-hilde2.png.webp" alt=""></div>
<div class="column"><img src="https://godofrockgame.com/wp-content/themes/godofrock/images/character-kosaku2.png.webp" alt=""></div>
<div class="column"><img src="https://godofrockgame.com/wp-content/themes/godofrock/images/character-rosetta2.png.webp" alt=""></div>
<div class="column"><img src="https://godofrockgame.com/wp-content/themes/godofrock/images/character-chorao2.png.webp" alt=""></div>
</div>

CSS

.columns {
  display: flex;
  width: 85%;
  margin: 0 auto;
}

.column {
  width: 20%;
  height: 100px;
  transform: skew(-35deg);
  margin: 0 0.5rem;
}

.column:nth-child(even) {
  background: #000;
}

.column:nth-child(odd) {
  background: #F00;
}

img {
  width: 100%;
}