JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="bottom triangle"></div>
  <div class="top triangle"></div>
  <div class="left triangle"></div>
  <div class="right triangle"></div>
</div>

CSS

.wrapper {
  margin: 50px auto;
  height: 250px;
  width: 240px;
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  animation: rotate 1s infinite 0s;
}

.bottom {
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #1fb050 transparent;
  bottom: 10px;
  left: calc(50% - 100px);
}

.top {
  border-width: 100px 100px 0 100px;
  border-color: #b4d575 transparent transparent transparent;
  top: 10px;
  left: calc(50% - 100px);
}

.left {
  border-width: 100px 0 100px 100px;
  border-color: transparent transparent transparent #1074b9;
  top: calc(50% - 100px);
  left: 10px;
}

.right {
  border-width: 100px 100px 100px 0;
  border-color: transparent #1daeec transparent transparent;
  top: calc(50% - 100px);
  right: 10px;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}