JSFiddle - React, Tailwind, and code Playground

HTML

<div class="skew-wrapper">
  <div class="skew">
    <div class="skew__body">1</div>
  </div>
  <div class="skew">
    <div class="skew__body">2</div>
  </div>
    <div class="skew">
    <div class="skew__body">3</div>
  </div>
</div>

SCSS

.skew-wrapper {
  display: flex;
  flex-direction:row;
}
.skew {
  height: 300px;
  width: 150px;
  display: flex;
  align-items:center;
  justify-content:center;
  transform:skew(-5deg, 0deg);
  &__body {
    transform:skew(5deg, 0deg)
  }
  &:first-of-type {
    background-color: red;
  }
    &:last-of-type {
    background-color: green;
  }
}