JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card front"></div>
<div class="card back">
  <div class="text">
    translation
  </div>
  </div>
</div>

SCSS

body {
    background-color: lightblue;
}

.card {
    $background-color: #fbfbfb;
    $border-color: #e2e2e2;
    $offset: 30px;
    $border-width: 4px;
    $border: $border-width solid $border-color;
    $border-radius: 7px;
    
    display: inline-block;
    box-sizing: padding-box;
    border-radius: $border-radius;
    margin-right: 20px;
    width: 200px;
    height: 300px;
    background-color: $background-color;
    position: relative;
    border: $border;
    
 /*    &.back {
        clip-path: polygon($offset 0, 100% 0, 100% 100%, 0 100%, 0 $offset);
    } */
    
    /* &.front {
        clip-path: polygon(calc(100% - #{$offset}) 0, 100% $offset, 100% 100%, 0 100%, 0 0);
        
        &:after {
            box-sizing: border-box;
            border: $border;
            display: block;
            width: $offset;
            height: $offset;
            background: $background-color;
            content: '';
            position: absolute;
            top: -$border-width;
            right: -$border-width;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            border-radius: 0 0 0 $border-radius;
        }
    } */
    &.back {
      background: url('https://image.freepik.com/free-vector/colorful-watercolor-background-dotted-texture_1035-6816.jpg');
    }
}

.text {
  position: absolute;
  color: #fff;
  font-size: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}