JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="box-with-shadow">test</div>

<footer>
  <b>3D Transform #1</b>
  From
  <a href="https://polypane.app/css-3d-transform-examples/">Beautiful CSS Transforms</a>
  by
  <a href="https://polypane.app"><img src="https://polypane.app/general/logo-small.png" style="width:100px" alt="Polypane"></a>
</footer>

CSS

body{
  background-color: #fff;
}

.box-with-shadow {
  transform: perspective(75em) rotateX(18deg);
  box-shadow: rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
}