JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<div class="main">
<div class="circles">
<div class="a">
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
<div class="b">
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="4" fill="red" />
</svg>
</div>
<div class="c">
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>
</div>
<div class="d">
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="purple" stroke-width="4" fill="gray" />
</svg>
</div>
</div>
</div>

CSS

div.circles > div {
  width: 50px;
  height: 50px;
  overflow: hidden;
  display: inline-block;
}

div.circles > div > svg {
  width: 100%;
  height: 100%;
}

div.main {
  position: relative;
  height: 150px;
    width: 150px;
    margin-left: 60px;
    border: 1px solid blue;
    -webkit-perspective: 100px; /* Safari 4-8  */
    perspective: 100px;
}

div.circles {
  padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    background: rgba(100,100,100,0.5); 
    -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateX(45deg); /* Safari 3-8  */
    transform-style: preserve-3d;
    transform: rotateX(45deg);
}