code.html

<div class="countdown" data-h="" data-m="0" data-s="15">
    <div class="countdown__num -h">00</div>
    <div class="countdown__sep">:</div>
    <div class="countdown__num -m">00</div>
    <div class="countdown__sep">:</div>
    <div class="countdown__num -s">00</div>
</div>
<div class="countdown__num -finished">FINALIZADA</div>

countdown.js

(function ($) {
    /**
     * Countdown
     */
    const countdownDiv = $('.countdown');
    let days           = countdownDiv.data('d') ? countdownDiv.data('d') : 0;
    let hours          = countdownDiv.data('h') ? countdownDiv.data('h') : 0;
    let minutes        = countdownDiv.data('m') ? countdownDiv.data('m') : 0;
    let seconds        = countdownDiv.data('s') ? countdownDiv.data('s') : 0;

    const selectDate = new Date().valueOf() + (days * 86400000) + (hours * 3600000) + (minutes * (1000 * 60)) + (seconds * 1000);
    countdownDiv.countdown(selectDate.toString(), function (event) {
        if (event.type !== 'stoped') {
            $('.countdown__num.-d').html(event.strftime('%D'));
            $('.countdown__num.-h').html(event.strftime('%H'));
            $('.countdown__num.-m').html(event.strftime('%M'));
            $('.countdown__num.-s').html(event.strftime('%S'));
        }
    }).on('finish.countdown', function (event) {
        gsap.to(['.countdown__num', '.countdown__sep'], {
            duration : 1,
            autoAlpha: 0,
            ease     : Back.easeIn,
            y        : "-=20"
        });
        gsap.to('.countdown__num.-finished', {
            onStart  : function () {
                gsap.set('.countdown', {
                    display: "none",
                })
            },
            duration : 1,
            display  : "block",
            autoAlpha: 1,
            ease     : Power1.easeOut,
            y        : "+=20",
            delay    : 1
        });
    });
})(jQuery);

style.scss

.countdown {
    display         : flex;
    align-items     : center;
    justify-content : center;

    &__num {
        font-size       : responsive 38px 42px;
        box-shadow      : 0px 5px 0 0 $rose-pink;
        font-weight     : 800;
        line-height     : 1;
        display         : flex;
        align-items     : center;
        flex-flow       : column;
        justify-content : center;
        width           : 90px;
        height          : 75px;
        margin          : 0 10px;
        color           : $white;
        background      : $black-three;

        // 1600
        @media (min-width : $screen-1600-min) {
            width  : 100px;
            height : 94px;
        }

        &:after {
            font-size   : responsive 14px 15px;
            font-weight : 700;
        }

        &.-finished {
            @include opacity(0);
            font-size    : responsive 26px 32px;
            font-weight  : 900;
            display      : none;
            visibility   : hidden;
            flex         : 0 0 100%;
            width        : 100%;
            max-width    : 400px;
            height       : auto;
            margin-right : auto;
            margin-left  : auto;
            padding      : 20px;
            text-align   : center;
            border       : none;
        }
    }

    &__sep {
        font-size   : responsive 44px 55px;
        font-weight : 700;
        color       : $black-three;

        // 1600
        @media (min-width : $screen-1600-min) {
            margin : 0 10px;
        }
    }
}