JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="figure_wrap"><div class="figure"></div></div>

CSS

.figure_wrap{
  position:relative;
}
.figure{
  width:300px;
  height:30px;
  background:grey;
  margin-top:150px;
 transform: skew(-60deg);
 margin-left: 20px;
 z-index:5;
}
.figure_wrap:before{
  content:"";
  width:150px;
  height:020px;
  background:green;
  transform: skew(-60deg);
  z-index:10;
  position:absolute;
  top:-25px;
  border-radius:50%;
   left:100px;
   box-shadow: 38px 22px 31px 1px rgba(0,0,0,1);
}
.figure_wrap:after{
  content:"";
  width:150px;
  height:20px;
  background:blue;
  transform: skew(-60deg);
  z-index:-1;
  position:absolute;
  bottom:-25px;
  border-radius:50%;
   left:100px;
   box-shadow: -10px -6px 31px 1px rgba(0,0,0,1);
}