JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<div class="box"></div>

SCSS

.box {
  background: #111;
  width: 300px;
  height: 300px;
  position: relative;
  
  &::after {
    content: '傾けた疑似要素';
    width: 200px;
    height: 200px;
    display: block;
    box-sizing: border-box;
    transform: translate(-50%, -50%) rotate(1deg);
    background: #fff;
    border: 10px solid #080;
    position: absolute;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
  }
}