JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="gota">
</div>
<div id="sangre1" class="sangre">
</div>
<div id="sangre2" class="sangre">
</div>
<div id="sangre3" class="sangre">
</div>
<div id="sangre4" class="sangre">
</div>
<div id="sangre5" class="sangre">
</div>
<div id="sangre6" class="sangre">
</div>
<div id="sangre7" class="sangre">
</div>
<div id="video">
    <h1>VIDEO</h1>
    <img src="http://lorempixel.com/people/320/240" />
</div>

CSS

body {
    padding: 20px;
}

#gota {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #DDD;
    border-radius: 50px;
    box-shadow: inset 1px 1px 3px #FFF;
}

#gota:hover, #gota.active {
    background: red;
}

.sangre {
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 30px;
    box-shadow: inset 1px 1px 3px #FFF;
    margin-left: 12px;
    margin-bottom: 10px;
    display: none;
}

#video {
    display: none;
}

JavaScript

$('#gota').click(function(){
    $(this).addClass('active');
    for (i = 1; i<=7 ; i++) {
        $('#sangre'+i).delay(i*500).fadeIn();
        if (i == 7) {
            $('#video').delay((i+1)*500).fadeIn();
        }
    }
});