JSFiddle - React, Tailwind, and code Playground

by riturajratan

HTML

<div class="candidate"> s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</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;
}

JavaScript

$(".candidate").each(function(index) { 
    $(this).animate( 'slow', function() {
        $(this).addClass("can"+index);
    console.log("index");
  });
});