JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullwidth">
    <div class="container hidden">
        <div class="candidate">can0</div>
        <div class="candidate">can1</div>
        <div class="candidate">can2</div>
        <div class="candidate">can3</div>
        <div class="candidate">can4</div>
        <div class="candidate">can5</div>
        <div class="candidate">can6</div>
        <div class="candidate">can7</div>
        <div class="candidate">can8</div>
        <div class="candidate">can9</div>
        <div class="candidate">can10</div>
        <div class="candidate">can11</div>
        <div class="candidate">can12</div>
    </div>
</div>

CSS

.can0 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}

.can1 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}

.can2 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}

.can3 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}

.can4 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}

.can5 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}

.can6 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}

.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}

.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}

.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}

.can10 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}

.can11 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}

.can12 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}
.candidate {
    position: absolute;
    width: 35%;
    height: auto;
    border-radius: 50%;
    right: -40%;
    border: .1em solid black;
    text-align: center;
}
.can3, .can4, .can5, .can6, .can7, .can8, .can9, .can10, .can11, .can12 {
	left: -10% !important;
}

.can0, .can1, .can2 {
	left: 0 !important;
}

.container {
	margin: 6em auto 2em; 
	width: 80%; 
	position: relative; 
	display: block;
}
.hidden {
    display: none;
}
.fullwidth {
    width: 100%;
}

JavaScript

$(".container").removeClass("hidden");
$(".candidate").each(function(index) {
    var xLeft = $(this).offset().left;
    $(this).animate(1000, function() {
        $(this).addClass("can"+index);
    });
});