JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>foo</p>
</div>

CSS

body{overflow:hidden;}
div{
  height:300px;
  background:#333;
  transform: rotate(-10deg);/*親要素を斜めにする*/
  position:relative;
  top:-150px;
  left:-100px;
  width:1500px;
}
p{
  padding-top:200px;
  color:#fff;
  width:50%;
  margin:auto;
  font-size:3em;
   transform: rotate(10deg);/*子要素だけ戻す*/
  }