JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="box-content">
    This is a box.
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 2em;
}

.box {
  width: 100%;
  border: 2px solid #666;
  border-image: linear-gradient(#B1005D, transparent) 2;
  position: relative;
  perspective: 200px;
}

.box:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: rgba(0,0,0,0.5) 0 0 30px -5px;
  transform: rotateX(-2deg) scaleY(0.95);
  transform-origin: top center;
  perspective-origin: top center;

}

.box-content {
  background: #FFF;
  padding: 1em;
  position: relative;
  min-height: 200px;
 }