JSFiddle - React, Tailwind, and code Playground

by Drew Christensen

HTML

<div class="perspective">
  <div class="rotation">
    <h1>
      Title here
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

CSS

body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
}
.perspective {
  margin: 50px 0;
  perspective: 200px;
  perspective-origin: 0 50%;
}
.rotation {
  /* position: relative; */
  width: 300px;
  height: 200px;
  
  transform:rotateY(-15deg);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  text-align: right;
  padding: 10px;
  box-sizing: border-box;
  
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
  
  background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent);
}
/* .rotation::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 50, 0.5), transparent);
} */