JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
    <Countdown date="Februari 24, 2017 17:00"></Countdown>
</div>

<template id="countdown">

    <div class="info">
        <p class="title">KNHB</p>
        <p class="description">Sprint 1</p>
    </div>

    <div class="timer">
        <div class="block">
            <p class="digit">{{ days | two_digits }}</p>
            <p class="text">Days</p>
        </div>
        <div class="block">
            <p class="digit">{{ hours | two_digits }}</p>
            <p class="text">Hours</p>
        </div>
        <div class="block">
            <p class="digit">{{ minutes | two_digits }}</p>
            <p class="text">Minutes</p>
        </div>
        <div class="block">
            <p class="digit">{{ seconds | two_digits }}</p>
            <p class="text">Seconds</p>
        </div>  
    </div>

</template>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);
#app {
    align-items: center;
    flex-direction: column;
    bottom: 0;
    background-color: #34495e;
    display: flex;
    justify-content: center;
}

.info {
	width: 50%;
	height: 200px;
	flex: 3;
}

.timer {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.block {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.text {
    color: #1abc9c;
    font-size: 25px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 400;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}

.digit {
    color: #ecf0f1;
    font-size: 130px;
    font-weight: 100;
    font-family: 'Roboto', serif;
    margin: 10px;
    text-align: center;
}

.title {
	color: #ecf0f1;
    font-size: 100px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 400;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}

.description {
	color: #ecf0f1;
    font-size: 50px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 40;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}

JavaScript

Vue.component('Countdown', {
        template: '#countdown',

    props: {
        date : {
            type: Number,
            coerce: str => Math.trunc(Date.parse(str) / 1000)
        },
    },
    data() {
        return {
            now: Math.trunc((new Date()).getTime() / 1000)
        }
    },
    ready() {
        window.setInterval(() => {
            this.now = Math.trunc((new Date()).getTime() / 1000);
        },1000);
    },
    computed: {
        seconds() {
            return (this.date - this.now) % 60;
        },
        minutes() {
            return Math.trunc((this.date - this.now) / 60) % 60;
        },
        hours() {
            return Math.trunc((this.date - this.now) / 60 / 60) % 24;
        },
        days() {
            return Math.trunc((this.date - this.now) / 60 / 60 / 24);
        }
    }
})

new Vue({
    el: '#app',
})

Vue.filter('two_digits', function (value) {
    if(value.toString().length <= 1)
    {
        return "0"+value.toString();
    }
    return value.toString();
});