JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="db">
<div class="face"></div>
</div>

CSS

.db {
  margin: 0 auto;
  width: 30vmin;
  height: 80vmin;
  border: 1vmin solid;
  border-radius: 30vmin/80vmin 30vmin;
  position: relative;
  border-bottom-color: transparent;
  transform: rotate(-30deg) skewY(-25deg);
}

.db::after,
.db::before {
  content: '';
  width: 45vmin;
  height: 30vmin;
  position: absolute;
  bottom: -26vmin;
  left: 6vmin;
  border: 1vmin solid;
  border-left-color: transparent;
  transform: skewY(25deg) rotate(30deg) skewX(-42deg);
  border-radius: 12vmin 32vmin 20vmin 51vmin/22vmin;
}
.db::after {
  bottom: -19vmin;
  left: 4vmin;
  border-color: transparent;
  border-top-color: currentColor;
}

.db .face {
  border-bottom: 1vmin solid;
  height: 20vmin;
  position: relative;
  transform: rotate(40deg) translate(8vmin, 0);
  border-radius: 20vmin/3vmin;
}

.db .face::after,
.db .face::before {
  content: '';
  position: absolute;
  left: -6vmin;
  top: 4vmin;
  width: 12vmin;
  height: 10vmin;
  border: 1vmin solid;
  border-radius: 12vmin/10vmin;
  background: radial-gradient(circle at 35% 45%, currentColor 0%, currentColor 50%, transparent 50%);
}

.db .face::after {
  left: auto;
  right: 6vmin;
  top: 6vmin;
}