JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bigBlock">
      <div class="circle Right"></div>
			<div class="circle Right"></div>
			<div class="circle Right"></div>
			<div class="circle Right"></div>
      
      <div class="circle Left"></div>
			<div class="circle Left"></div>
			<div class="circle Left"></div>
			<div class="circle Left"></div>

  </div>

SCSS

$colorMain1: rgba(253,225,6, .5);	
$colorMain2: rgba(255,0,0, .5);

@mixin gradient($top, $bottom, $direction: false) {

	@if $direction {
		background: $direction; /* Old browsers */
		background: -moz-linear-gradient($direction, $top 0%, $bottom 100%);
		background: -webkit-linear-gradient($direction, $top 0%, $bottom 100%);
		background: -o-linear-gradient($direction, $top 0%, $bottom 100%);
		background: -ms-linear-gradient($direction, $top 0%, $bottom 100%);
		background: linear-gradient(to $direction, $top 0%, $bottom 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); /* IE6-9 */
		} @else {
			background: $top; /* Old browsers */
			background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top), color-stop(100%, $bottom)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, $top 0%, $bottom 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */
			background: linear-gradient(to bottom, $top 0%, $bottom 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); /* IE6-9 */
		}

	}

	body{
		width: 100%;
		height: 100vh;
		background-color: #000;
	}

.bigBlock{
		margin: 0;
		padding: 0;
		position: relative;
		width: 50%;
		height: 50%;	
		border: 1px solid #fff;
		perspective: 2500px;
		z-index: 1;
		.circle{
			position: absolute;
			width: calc(25%);
			height: 50%;
			border-radius: 50%;	
			z-index: 20;
		
		}	
	}

.Left{
		top: 75%;
		left: 75%;
		transform-origin: right center;
		@include gradient ($colorMain1, $colorMain2, right);

	@for $i from 2 through 4 {
		&:nth-child(#{$i}) {
			// animation: rotationCircle 900ms  infinite;
			left: 75% -...