JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div class="wrapper">
            <div class="circles">
                <div class="circle_holder first">
                    <div class="circle pie">
                        <a href="#"><span>Overview</span></a>

                    </div>
                </div>
                <div class="circle_holder second">
                    <div class="circle pie">
                        <a href="#"><span>social sustainability</span></a>
                    </div>
                </div>
                <div class="circle_holder third">

                    <div class="circle pie">
                        <a href="#"><span>environmental protection</span></a>
                    </div>
                </div>
                <div class="circle_holder fourth">
                    <div class="circle pie">
                        <a href="#"><span>building sustainable financial institutions</span></a>
                    </div>

                </div>
                <div class="circle_holder fifth">
                    <div class="circle pie">
                        <a href="#"><span>working with partners</span></a>
                    </div>
                </div>
                <div class="circle_holder sixth">
                    <div class="circle pie">

                        <a href="#"><span>food and water</span></a>
                    </div>
                </div>
                <div class="circle_holder seventh">
                    <div class="circle pie">
                        <a href="#"><span>climate change and energy</span></a>
                    </div>
                </div>

                <div class="circle_holder eigth">
                    <div class="circle pie">
                        <a href="#"><span>reporting on our policies and procedures</span></a>
                    </div>
                </div>
            </div>
        </div>

CSS

body {
color: #24817B;
font-family: Georgia,serif;
}

.wrapper {
margin: 70px auto;
width: 549px;
}

.circles {
background: url(img/circle_bg.png) no-repeat;
font-size: 14px;
height: 422px;
position: relative;
width: 407px;
}

.main_title {
font-size: 24px;
left: 89px;
position: absolute;
text-align: center;
top: 162px;
width: 225px;
}

.circle_holder {
position: absolute;
}

.circle {
border-radius: 100%;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 14px;
height: 0px;
left: 84px;
-ms-transition-duration: 2s;
-ms-transition-property: all;
-ms-transition-timing-function: ease-in-out;
-moz-transition-duration: 2s;
-moz-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-duration: 2s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
-o-transition-duration: 2s;
-o-transition-property: all;
-o-transition-timing-function: ease-in-out;
transition-duration: 2s;
transition-property: all;
transition-timing-function: ease-in-out;
text-align: center;
overflow: hidden;
position: absolute;
top: 84px;
width: 0px;
zoom: 1;
opacity: 0;
}

.circle.open {
top: 0px;
left: 0px;
width: 168px;
height: 168px;
}

.circle a {
bottom: 0;
color: #fff;
left: 0;
position: absolute;
right: 0;
text-decoration: none;
text-transform: uppercase;
top: 0;
}

.circle a span {
left: 20%;
position: absolute;
text-shadow: 1px 1px 2px #000;
top: 40%;
width: 100px;
}

.first { left: 194px; top: -51px; z-index: 10; }
.first .circle { background: rgba(211,79,50,0.8); -pie-background: rgba(211,79,50,0.8); }
.first a span { top: 44%; }

.second { left: 296px; top: 51px; }
.second .circle { background: rgba(253, 217, 79, 0.8); -pie-background: rgba(253, 217, 79, 0.8); }

.third { left: 298px; top: 199px; }
.third .circle { background: rgba(108, 27, 54, 0.8); -pie-background: rgba(108, 27, 54, 0.8); }
.third a span { left: -3%; width: 180px; }

.fourth { left: 195px; top: 300px; }
.fourth .circle { background: rgba(169, 204, 86,...

JavaScript

$('.circle').each(function(i){
    var time = 500 * (i + 1);
    setTimeout(function(){
        $('.circle').eq(i).addClass('open').animate({opacity: '1'}, i);
    }, time);
});