JSFiddle - React, Tailwind, and code Playground

HTML

<div class="butt-wrapper">
  <div class="butt butt-l">
  </div>
  <div class="butt butt-r"></div>
</div>

<div class="pinus">
  <div class="p-top">
    <div class="p-head"></div>
    <div class="p-body"></div>
  </div>
  <div class="p-bottom">
    <div class="p-balls"></div>
    <div class="p-balls"></div>
  </div>
</div>

CSS

.butt-wrapper {
  position: relative;
  width: 200px;
}

.butt {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 100px;
  background: #E7CEA3;
  border: 3px solid #CEBA8C;
}

.butt-l {
  z-index: 1;
}

.butt-l span {
  font-size: 10px;
  transform: rotate(-40deg);
  display: block;
  padding-top: 40px;
}

.butt-l span:hover {
  cursor: pointer;
}

@keyframes buttsex {
  40% {
    transform-origin: 18px -73px;
    /* transform: rotate(-32deg); */
  }
  60% {
    transform-origin: -16px -45px;
  }
  80% {
   transform: rotate(-31deg);
  transform-origin: -91px -62px;
  }
}

.butt-r {
  position: absolute;
  right: 79px;
  z-index: -2;
  width: 90px;
  height: 91px;
  top: 6px;
}

.pinus {
  position: relative;
  height: 110px;
  transform: rotate(-40deg);
  transform-origin: 39px -95px;
  z-index: -1;
  animation: buttsex 1s infinite linear;
}

.p-top {
  position: absolute;
  left: 27px;
  top: 20px;
}

.p-bottom {
  position: absolute;
  bottom: 0;
}

.p-head {
  width: 20px;
  height: 20px;
  border-radius: 12px 12px 0px 0px;
  background: #C92D2D;
}

.p-body {
  width: 20px;
  height: 60px;
  background: #E7CEA3;
  border: 1px solid #CEBA8C;
  box-sizing: border-box;
}

.p-balls {
  width: 30px;
  height: 30px;
  background: #E7CEA3;
  border: 2px solid #CEBA8C;
  border-radius: 30px;
  display: inline-block;
}