JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">  
  <div class="kek">
    <div class="inner-kek">
       text
    </div>
  </div>
</div>

CSS

body {
    background-color: #eee;
  
}
.outer {
  width: 300px;
  height: 100px;
  margin: 65px auto;
}
.kek {

    width: 100%;
    height: 100%;
    transform: skew(-20deg);
    transform: skewY(-15deg);
    background-color: orange;
    }

.inner-kek {
 position: absolute;
 margin-top: 50px;
 margin-left: 150px;
 z-index: 1;
 transform: skew(20deg);
 transform: skewY(15deg);
}