Coutdown

HTML

<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/template" id="main-example-template">
<div class="time 123">
  <span class="count curr top">123654</span>
  <span class="count next top">123</span>
  <span class="count next bottom">315</span>
  <span class="count curr bottom">654123</span>
  <span class="label">132132</span>
</div>
</script>
      
      
<div class="main-example">
  <p>
    Next year begins in:
  </p>
  <div class="countdown-container" id="main-example">
</div>
</div>

CSS

body{color:#444;font-family:'Source Sans Pro', sans-serif !important;font-weight:300;line-height:1.4em;}
.main-example{margin:0 auto;width:355px;}
.main-example .countdown-container{height:130px;}
.main-example .time{border-radius:5px;box-shadow:0 0 10px 0 rgba(0,0,0,0.5);display:inline-block;text-align:center;position:relative;height:95px;width:65px;-webkit-perspective:500px;-moz-perspective:500px;-ms-perspective:500px;-o-perspective:500px;perspective:500px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.main-example .count{background:#202020;color:#f8f8f8;display:block;font-family:'Oswald', sans-serif;font-size:2em;line-height:2.4em;overflow:hidden;position:absolute;text-align:center;text-shadow:0 0 10px rgba(0, 0, 0, 0.8);top:0;width:100%;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transform-style:flat;-moz-transform-style:flat;-ms-transform-style:flat;-o-transform-style:flat;transform-style:flat;}
.main-example .count.top{border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(255,255,255,0.1);border-radius:5px 5px 0 0;height:50%;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;}
.main-example .count.bottom{background-image:linear-gradient(rgba(255,255,255,0.1), transparent);background-image:-webkit-linear-gradient(rgba(255,255,255,0.1), transparent);background-image:-moz-linear-gradient(rgba(255,255,255,0.1),...