JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<div class="sloppy">
  <div class="sloppy-bg"></div>
  <div class="sloppy-text">
    <h3>Long text</h3>
  </div>
</div>

CSS

.sloppy {
  display: inline-block;
  width: auto;
  height: 45px;
}
.sloppy-bg {
 transform: matrix3d(2.619752, 0.194323, 0, 0.001943, 
                    0.662143, 2.28115, 0, 0.001306, 
                    0, 0, 1, 0, 
                    -321.708724, -112.904435, 0, 1);
 transform-origin: -270px -55px;
 
 width: 100%;
 height: 45px;
 background: green;
 position: relative;
 top: 20px;
 display: inline-block;
}

.sloppy-text {
  position: relative;
  top: -65px;
  color: #fff;
  
  height: 100%;
  font-size: 1.3em;
  padding: 5px;
}