JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="flower">
  <div class="petal" style="--index:0;"></div>
  <div class="petal" style="--index:1;"></div>
  <div class="petal" style="--index:2;"></div>
  <div class="petal" style="--index:3;"></div>
  <div class="petal" style="--index:4;"></div>
  <div class="petal" style="--index:5;"></div>
</div>

CSS

.flower {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
}
.petal {
  top: -100px;
  left: -100px;
  background: red;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  transform-origin: 50% 100%;
  transform: rotateX(0deg) rotateY(0deg) translateY(-200px) rotateZ(calc(var(--index) * 60deg));
  position: absolute;
}