JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul
    {
      position: absolute;
      list-style: none;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      color: #fc2e5a;

    }
li:nth-child(1)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%) rotate(18deg); 
#      transform-origin: 50% 38px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }/*
li:nth-child(2)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%) rotate(-36deg); 
      transform-origin: 50% 38px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }
li:nth-child(3)
    {
      width: 0;
      height: 0;
#      background: RGBA(240, 210, 225, .7);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%) rotate(252deg); 
      transform-origin: 50% 38px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #fc2e5a;
      border-left: 100px solid transparent;
#      border-top: 70px solid #fc2e5a;
    }
li:nth-child(4)
    {
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: #e0b500;
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, calc(-50% + 3px)); 
    }