JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="block">
  <div class="block-red">
    <span>
      text text  text  text  text  text text  text  
      text  text  text  text  
    </span>
    </div>
</div>

CSS

body {
  padding: 50px;
}

* {
  box-sizing: border-box;
}

.block {
  width: 200px;
  height: 100px;
  background: #888;
  color: #fff;  
  overflow: hidden;
}

.block-red {
  width: 180px;
  height: 140px;
  padding: 10px 30px 10px 60px;
  position: relative;
  left: -50px;
  background: #c00;
  -webkit-backface-visibility: hidden;
  -webkit-transform: skew(-15deg) translate3d(0, 0, 0);
  transform: skew(-15deg) translate3d(0, 0, 0);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.block-red > span {
  display: block;
  -webkit-transform: skew(15deg) translate3d(0, 0, 0);
  transform: skew(15deg) translate3d(0, 0, 0);
}

.block:hover .block-red{
  background: #00f;
}