JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<div style='background-image: url("https://placeimg.com/640/380/any")'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima assumenda, voluptatum in, numquam quam repudiandae, temporibus explicabo ex, laudantium ipsum animi eius rerum eos neque quibusdam amet accusantium velit cupiditate!
  </p>
</div>

SCSS

* {
  box-sizing: border-box;
  font-family: Helvetica Neue;
}

body {
  background: #222;
}

div {
  width: 80%;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  min-height: 378px;
 
  background-position: top right;
  background-size: auto 100%;
  background-repeat: no-repeat;
  
  p {
    width: 50%;
    padding: 20px;
    position: relative;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transform: translate(-45%, 0) skewX(-12deg);
  }
}