JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
 
 <div class="stripes-wraper">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="gradient-mask"></div>
 

</figure>

CSS

body {
  height: 100vh;
  overflow: hidden;
}

figure {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stripes-wraper {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px #F29);
  overflow: hidden;
  position: absolute;
}

.stripe {
  width: 100%;
  height: 15px;
  background-color: #FFF;

}

.stripe + .stripe {
  margin-top: 15px;
}

.gradient-mask {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #92F 0%, #F29 100%);
  mix-blend-mode: multiply;
  position: absolute;
}