JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<div class="spin">
<div class="scalable-div">
	<div class="circle">
	</div>
	<img class="svg-img" id="unique-1" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset1.svg">

	<img class="svg-img" id="unique-2"src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset2.svg">

	<img class="svg-img" id="unique-3" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset3.svg">

	<img class="svg-img" id="unique-4" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset4.svg">
	<img class="svg-img" id="unique-5" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset5.svg">
	<img class="svg-img" id="unique-6" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset6.svg">
	<img class="svg-img" id="unique-7" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset7.svg">
	<img class="svg-img" id="unique-8" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset8.svg">
</div>
</div>

CSS

.circle {
	height: 200px;
	width: 200px;
	border-radius: 100px;
	position: absolute;
	z-index: 10;
	background: white;
	top: 10%
}

.svg-img {
	position: absolute;
	height: 20%;
}

#unique-1 {
	left: 0%;
}

#unique-2 {
	 left: 9.5%;
	 z-index: 2;
}

#unique-3 {
	left: 9.5%;
}

#unique-4 {
	left: 9.5%;
	top: 14.2%;
}

#unique-5 {
	top: 18%;
	z-index: 2;
	left: 9.5%
}

#unique-6 {
	top: 21%;
	left: 10%;
}

#unique-7 {
	top: 21%;
	left: 8%;
}

#unique-8 {
	top: 21%;
	left: 2%;
	z-index: -1;
}