JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="holder">
    <div class="text">Lorem Ipsum Dolorem</div>
    <div class="above"></div>
    <div class="below"></div>
</div>

CSS

.holder {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.text {
    position: relative;
    z-index: 3;
    padding: 20px;
}
.above, .below {
    z-index: 2;
    position: absolute;
    width: 500px;
    height: 25px;
    background: red;
    left: -250px;
    top: 20px;
}
.above {
  -webkit-transform: rotate(3.5deg);  
     -moz-transform: rotate(3.5deg); 
      -ms-transform: rotate(3.5deg); 
       -o-transform: rotate(3.5deg);  
          transform: rotate(3.5deg);     
}
.below {
  -webkit-transform: rotate(-3.5deg); 
     -moz-transform: rotate(-3.5deg); 
      -ms-transform: rotate(-3.5deg); 
       -o-transform: rotate(-3.5deg); 
          transform: rotate(-3.5deg); 
}