JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div class='device'>
  <div class='image'></div>
  <div class='shadow'></div>
</div>

CSS

.device{
  padding:20px;
  position:absolute;
  background:#eee;
}

.image{
  position:relative;
  background-color:teal;
  height:80px;
  width:90px;
  border-radius:5px;
  z-index:2;
}

.shadow{
  position:absolute;
  left:20px;
  bottom:-10px;
  height:80px;
  width:90px;
  background-color:hsla(0,0%,0%,0.3);
  border-radius:20px;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  
  transform-origin: center;
}