JSFiddle - React, Tailwind, and code Playground

by Manu Jose

HTML

<body>
    <div class='flower-of-life'>
        <div class="rectangle rect1"></div>
        <div class="rectangle rect2"></div>
        <div class="rectangle rect3"></div>
        <div class="rectangle rect4"></div>
        <div class="rectangle rect5"></div>
        <div class="rectangle rect6"></div>
        <div class="rectangle rect7"></div>
        <div class="rectangle rect8"></div>
        <div class="rectangle rect9"></div>
        <div class="rect-circle1 circ1"></div>
        <div class="rectangle1 rect11"></div>
        <div class="rectangle1 rect12"></div>
        <div class="rectangle1 rect13"></div>
        <div class="rectangle1 rect14"></div>
        <div class="rectangle1 rect15"></div>
        <div class="rectangle1 rect16"></div>
        <div class="rectangle1 rect17"></div>
        <div class="rectangle1 rect18"></div>
        <div class="rectangle1 rect19"></div>
        <div class="rect-circle2 circ2"></div>
        <div class="rectangle2 rect21"></div>
        <div class="rectangle2 rect22"></div>
        <div class="rectangle2 rect23"></div>
        <div class="rectangle2 rect24"></div>
        <div class="rectangle2 rect25"></div>
        <div class="rectangle2 rect26"></div>
        <div class="rectangle2 rect27"></div>
        <div class="rectangle2 rect28"></div>
        <div class="rectangle2 rect29"></div>
        <div class="rect-circle3 circ3"></div>
        <div class="rectangle3 rect31"></div>
        <div class="rectangle3 rect32"></div>
        <div class="rectangle3 rect33"></div>
        <div class="rectangle3 rect34"></div>
        <div class="rectangle3 rect35"></div>
        <div class="rectangle3 rect36"></div>
        <div class="rectangle3 rect37"></div>
        <div class="rectangle3 rect38"></div>
        <div class="rectangle3 rect39"></div>
        <div class="rect-circle4 circ4"></div>
        <div id="circle1" class="circle">
            <div id="circle2" class="circle"></div>
            <div...

CSS

body {
    background: #f5e8ff;
}

/*Animations*/
@-webkit-keyframes cloud1 {
    from {
        left: 10px;
    }
    to {
        left: 200px;
    }
}

@-webkit-keyframes cloud2 {
    from {
        left: 55px;
    }
    to {
        left: 200px;
    }
}

@-webkit-keyframes cloud3 {
    from {
        left: 100px;
    }
    to {
        left: 250px;
    }
}

@keyframes jump {
    0% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }    
    100% {
        transform: translate3d(0, 20%, 0) scale3d(1, 1, 1);
    }
}

@-webkit-keyframes rotate {
    50% {
        border-radius: 38%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    50% {
        border-radius: 38%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate1 {
    50% {
        border-radius: 38%;
        -webkit-transform: translate(-30%, 8%) rotate(180deg);
        transform: translate(-30%, 8%) rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: translate(-20%, 0%) rotate(360deg);
        transform: translate(-20%, 0%) rotate(360deg);
    }
}

@keyframes rotate1 {
    50% {
        border-radius: 38%;
        -webkit-transform: translate(-30%, 8%) rotate(180deg);
        transform: translate(-30%, 8%) rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: translate(-20%, 0%) rotate(360deg);
        transform: translate(-20%, 0%) rotate(360deg);
    }
}

@-webkit-keyframes rotate2 {
    50% {
        -webkit-transform: translate(30%, 8%) rotate(180deg);
        transform: translate(30%, 8%) rotate(180deg);
    }
    100% {
        -webkit-transform:...