JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<div class="page foldtr">
  <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

CSS

.foldtr {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
 
}
 
.foldt:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-right: 70px solid transparent;
  -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
 
.foldtr:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}