JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

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

CSS

:root {
  --shadowSize: 10px;
  --shadowColor: #f00;
}

.box {
  position: relative;
  width: 300px;
  padding: 20px;
  box-shadow: 0 0 var(--shadowSize) var(--shadowColor);
  background-color: #fff;
  border-radius: 4px;
}

.box:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 0 var(--shadowSize) var(--shadowColor);
  transform: translate(50%, -50%) rotate(45deg);
  clip-path: polygon(
    calc(var(--shadowSize) * -1) calc(var(--shadowSize) * -1), 
    calc(100% + var(--shadowSize)) calc(var(--shadowSize) * -1), 
    calc(100% + var(--shadowSize)) calc(100% + var(--shadowSize))
  );
}