JSFiddle - React, Tailwind, and code Playground

by jlaw

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="fa fa-circle-thin"> <i class="fa fa-arrow-down"></i>

</div>

CSS

html {
    font-size: 62.5%;
}
body {
    font-size: 1.4rem;
}
.fa-circle-thin {
    font-size: 7rem;
}
.fa-arrow-down {
    font-size: 2rem;
    position: relative;
    right: 57px;
    bottom: 27px;
}

JavaScript

var move = function (target, speed) {
    $(target).delay(200).animate({
        bottom: "-=20"
    },
    speed,

    function () {
        $(this).fadeOut(200, function () {
            $(this).css("bottom", "+=20");
        });
        $(this).fadeIn(200, function () {
            move(target, speed);


        });
    });
};

move(".fa-arrow-down", 500);