JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<div>Seme</div>

CSS

html {
  height: 100%;
}

body {
  background-color: #f0f1f2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

div {
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  /* box-shadow: 0 2px 0px #C4C4C4; */

  transform: rotateX(60deg);
}

.first {
  top: calc(50% - 100px);
}

.second {
  top: calc(50% - 100px + 10px);
}
.c3 {
  top: calc(50% - 100px + 20px);
}
.c4 {
  top: calc(50% - 100px + 30px);
}
.c5 {
  top: calc(50% - 100px + 40px);
}
.c6 {
  top: calc(50% - 100px + 50px);
}
.c7 {
  top: calc(50% - 100px + 60px);
}
.c8 {
  top: calc(50% - 100px + 70px);
}